{"success":true,"data":{"block":{"id":"article-compact-toc","name":"Article Compact TOC","title":"Article Compact TOC","category":"Article","categorySlug":"article","description":"A compact, mobile-friendly article layout with a collapsible table of contents, breadcrumb navigation, and inline social sharing buttons. Features a centered content area with author info, read time, and publication date. Ideal for research papers, studies, and articles that need a clean, focused reading experience on all devices.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293092/4v2rlq4p4za5hnsby385in3o2u8w/cleanshot-2026-03-03-at-13-40-01.png","mobile":"https://cdn.ing/assets/i/r/293091/hv0py46jnstvdhy1i1vbk17kywhv/cleanshot-2026-03-03-at-13-40-18.png"},"componentPath":"blocks/article/article-compact-toc.tsx","code":"import { ArticleCompactToc } from \"@opensite/ui/blocks/article/article-compact-toc\";\nimport { imagePlaceholders, LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\n/**\n * ArticleCompactToc Demo\n *\n * Key Feature: Mobile-optimized collapsible Table of Contents\n * - TOC appears below the article meta on mobile/tablet screens\n * - Click \"Table of Contents\" button to expand/collapse navigation\n * - Automatically tracks active section as you scroll\n * - Sections are linked and clickable for quick navigation\n *\n * To see the TOC in action: resize your browser to mobile width (< 1024px)\n */\nexport default function Demo() {\n  return (\n    <ArticleCompactToc\n      breadcrumbs={[\n        { label: \"Research\", href: \"#research\" },\n        { label: \"Studies\", href: \"#studies\" },\n      ]}\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.7}\n      background=\"white\"\n      currentPage=\"User Behavior Analysis\"\n      title=\"Understanding User Behavior in Modern Web Applications\"\n      authorName=\"Dr. Jennifer Park\"\n      authorHref=\"#\"\n      publishDate=\"January 22, 2026\"\n      readTime=\"8 min read\"\n      heroImageSrc={imagePlaceholders[5]}\n      heroImageAlt=\"User behavior analytics visualization\"\n      sections={[\n        { id: \"introduction\", title: \"Introduction\" },\n        { id: \"methodology\", title: \"Methodology\" },\n        { id: \"results\", title: \"Results\" },\n        { id: \"discussion\", title: \"Discussion\" },\n        { id: \"conclusion\", title: \"Conclusion\" },\n      ]}\n      enableTocTracking={true}\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},"breadcrumbClassName":{"type":"string","description":"Additional CSS classes for the breadcrumb","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"metaClassName":{"type":"string","description":"Additional CSS classes for the meta info","required":false},"tocClassName":{"type":"string","description":"Additional CSS classes for the TOC","required":false},"articleClassName":{"type":"string","description":"Additional CSS classes for the article content","required":false},"heroImageClassName":{"type":"string","description":"Additional CSS classes for the hero image","required":false},"breadcrumbs":{"type":"array","description":"Breadcrumb navigation items","items":{"type":"object","description":"","fields":{"label":{"type":"string","description":"","required":true},"href":{"type":"string","description":"","required":true}},"typeLabel":"BreadcrumbItemConfig"},"typeLabel":"BreadcrumbItemConfig[]","required":false},"breadcrumbsSlot":{"type":"object","description":"Custom slot for rendering breadcrumbs (overrides breadcrumbs array)","typeLabel":"React.ReactNode","required":false},"currentPage":{"type":"object","description":"Current page name in breadcrumb","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Article title","typeLabel":"React.ReactNode","required":false},"description":{"type":"string","description":"Article summary/description","required":false},"authorName":{"type":"object","description":"Author name","typeLabel":"React.ReactNode","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},"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":"ArticleCompactTocSection"},"typeLabel":"ArticleCompactTocSection[]","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: ArticleCompactTocSection, 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},"markdownString":{"type":"string","description":"Markdown string to render","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","collapsible","mobile-friendly","compact","breadcrumb","social-sharing","research"],"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!"}},"timestamp":"2026-05-13T10:40:41.159Z"}