{"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/308412/m7ncpevmwg1c2w3ndzkpguyqtt4l/article-compact-toc-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308411/s58nqd7oaffxadmjfbyhwy7u92fv/article-compact-toc-mobile.jpg"},"componentPath":"blocks/article/article-compact-toc.tsx","code":"import { ArticleCompactToc } from \"@opensite/ui/blocks/article/article-compact-toc\";\nimport { LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\nconst ARTICLE_IMAGE_URL =\n  \"https://toastability-production.s3.amazonaws.com/jhjfvkmdzktacyijd9fh6acc7o2c\";\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={ARTICLE_IMAGE_URL}\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,"minItems":1,"maxItems":4},"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,"maxLength":80},"title":{"type":"object","description":"Article title","typeLabel":"React.ReactNode","required":true,"maxLength":100},"description":{"type":"string","description":"Article summary/description","required":false,"maxLength":220},"authorName":{"type":"object","description":"Author name","typeLabel":"React.ReactNode","required":true,"maxLength":80},"authorHref":{"type":"string","description":"Author profile href","required":false},"publishDate":{"type":"object","description":"Publish date string","typeLabel":"React.ReactNode","required":true,"maxLength":40},"readTime":{"type":"object","description":"Read time string","typeLabel":"React.ReactNode","required":false,"maxLength":30},"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":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: ArticleCompactTocSection, 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},"markdownString":{"type":"string","description":"Markdown string to render","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":{"breadcrumbs":[{"label":"Research","href":"#"},{"label":"Studies","href":"#"}],"currentPage":"User Behavior Analysis","title":"Understanding User Behavior in Modern Web Applications","authorName":"Dr. Jennifer Park","authorHref":"#","publishDate":"January 22, 2026","readTime":"8 min read","heroImageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","heroImageAlt":"User behavior analytics workspace","sections":[{"id":"overview","title":"Overview"},{"id":"implementation","title":"Implementation"},{"id":"conclusion","title":"Conclusion"}],"enableTocTracking":true,"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","collapsible","mobile-friendly","compact","breadcrumb","social-sharing","research"],"performance":{},"importantUsageNotes":"Use for articles that need a compact, mobile-friendly table of contents and a focused reading column. sections[].id must map to real headings in markdownString when tracking is enabled. heroImageSrc must be an absolute image URL only, never a placeholder variable, relative /images path, logo, favicon, or video URL.","usageRequirements":{"requiredProps":["title","authorName","publishDate","heroImageSrc","heroImageAlt","sections","markdownString"],"propConstraints":{"breadcrumbs":{"required":false,"minItems":1,"maxItems":4},"currentPage":{"required":false,"maxLength":80},"title":{"required":true,"maxLength":100},"description":{"required":false,"maxLength":220},"authorName":{"required":true,"maxLength":80,"note":"Must identify a real article author or organization byline."},"publishDate":{"required":true,"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},"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."}},"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:52:28.969Z"}