{"success":true,"data":{"block":{"id":"article-breadcrumb-social","name":"Article Breadcrumb Social","title":"Article Breadcrumb Social","category":"Article","categorySlug":"article","description":"A comprehensive article layout featuring breadcrumb navigation, social sharing buttons, a sticky table of contents sidebar, and a floating back-to-top button. Includes author information with role, read time, and IntersectionObserver-based section tracking. Perfect for content-heavy articles that need robust navigation and sharing capabilities.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293090/hoh2ao05dwia3s4ap3gitbe3vbxv/cleanshot-2026-03-03-at-13-28-59.png","mobile":"https://cdn.ing/assets/i/r/293089/qr1mwbjz0ww9ox7rx6jnqu4sohwg/cleanshot-2026-03-03-at-13-29-17.png"},"componentPath":"blocks/article/article-breadcrumb-social.tsx","code":"import { ArticleBreadcrumbSocial } from \"@opensite/ui/blocks/article/article-breadcrumb-social\";\nimport { imagePlaceholders, LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <ArticleBreadcrumbSocial\n      breadcrumbs={[\n        { label: \"Blog\", href: \"#\" },\n        { label: \"Technology\", href: \"#\" },\n      ]}\n      background=\"white\"\n      pattern=\"p6\"\n      patternOpacity={1}\n      currentPage=\"Building Scalable Web Applications\"\n      title=\"Building Scalable Web Applications in 2026\"\n      author={{\n        name: \"Sarah Mitchell\",\n        image: imagePlaceholders[9],\n        role: \"Senior Software Architect\",\n      }}\n      publishDate=\"January 15, 2026\"\n      readTime=\"12 min read\"\n      heroImageSrc={imagePlaceholders[42]}\n      heroImageAlt=\"Modern web application architecture\"\n      sections={[\n        { id: \"overview\", title: \"Overview\" },\n        { id: \"key-features\", title: \"Key Features\" },\n        { id: \"implementation\", title: \"Implementation\" },\n        { id: \"performance\", title: \"Performance Metrics\" },\n        { id: \"summary\", title: \"Summary\" },\n      ]}\n      enableTocTracking={true}\n      enableBackToTop={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},"articleClassName":{"type":"string","description":"Additional CSS classes for the article content area","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author section","required":false},"heroImageClassName":{"type":"string","description":"Additional CSS classes for the hero image","required":false},"tocClassName":{"type":"string","description":"Additional CSS classes for the TOC container","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},"author":{"type":"object","description":"Author configuration","fields":{"name":{"type":"string","description":"","required":false},"image":{"type":"string","description":"","required":false},"role":{"type":"string","description":"","required":false}},"typeLabel":"ArticleAuthorConfig","required":false},"authorSlot":{"type":"object","description":"Custom slot for rendering author info (overrides author config)","typeLabel":"React.ReactNode","required":false},"publishDate":{"type":"object","description":"Publish date text","typeLabel":"React.ReactNode","required":false},"readTime":{"type":"object","description":"Read time text","typeLabel":"React.ReactNode","required":false},"sections":{"type":"array","description":"Table of contents sections","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true}},"typeLabel":"ArticleBreadcrumbSection"},"typeLabel":"ArticleBreadcrumbSection[]","required":false},"tocSlot":{"type":"object","description":"Custom slot for rendering TOC (overrides sections array)","typeLabel":"React.ReactNode","required":false},"renderSectionLink":{"type":"object","description":"Render callback for section links (overrides default rendering)","typeLabel":"( section: ArticleBreadcrumbSection, 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 TOC tracking","required":false},"enableBackToTop":{"type":"boolean","description":"Enable back to top button","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","breadcrumb","social-sharing","toc","back-to-top","navigation","author","read-time"],"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 author.ame, author.image, and author.role fields if you have actual data to populate those fields, using empty/fake data is not acceptable!"}},"timestamp":"2026-05-13T10:41:29.481Z"}