{"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/308375/3r23eff3qqdkxbrslswj69thjhbn/article-breadcrumb-social-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308376/xazzewaq4iigv2q56le093rqrj2j/article-breadcrumb-social-mobile.jpg"},"componentPath":"blocks/article/article-breadcrumb-social.tsx","code":"import { ArticleBreadcrumbSocial } from \"@opensite/ui/blocks/article/article-breadcrumb-social\";\nimport { LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\nconst ARTICLE_IMAGE_URL =\n  \"https://toastability-production.s3.amazonaws.com/0o6d7z4mm9nzeufhv9kefrhihbip\";\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: ARTICLE_IMAGE_URL,\n        role: \"Senior Software Architect\",\n      }}\n      publishDate=\"January 15, 2026\"\n      readTime=\"12 min read\"\n      heroImageSrc={ARTICLE_IMAGE_URL}\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":true,"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":true,"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":240},"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":true,"mediaHints":{"path":"author.image","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."}},"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":true,"maxLength":40},"readTime":{"type":"object","description":"Read time text","typeLabel":"React.ReactNode","required":false,"maxLength":30},"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":true,"minItems":3,"maxItems":8},"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":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 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},"breadcrumbs[].label":{"type":"object","description":"","required":true,"maxLength":40},"breadcrumbs[].href":{"type":"object","description":"","required":true},"author.name":{"type":"object","description":"","required":true,"maxLength":80},"author.role":{"type":"object","description":"","required":false,"maxLength":80},"author.image":{"type":"object","description":"","required":false},"sections[].id":{"type":"object","description":"","required":true},"sections[].title":{"type":"object","description":"","required":true,"maxLength":60}},"exampleProps":{"breadcrumbs":[{"label":"Blog","href":"#"},{"label":"Technology","href":"#"}],"currentPage":"Building Scalable Web Applications","title":"Building Scalable Web Applications in 2026","description":"A source-backed article with breadcrumb navigation, sharing controls, and a tracked table of contents.","author":{"name":"Sarah Mitchell","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","role":"Senior Software Architect"},"publishDate":"January 15, 2026","readTime":"12 min read","heroImageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","heroImageAlt":"Modern web application architecture","sections":[{"id":"overview","title":"Overview"},{"id":"implementation","title":"Implementation"},{"id":"conclusion","title":"Conclusion"}],"enableTocTracking":true,"enableBackToTop":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","breadcrumb","social-sharing","toc","back-to-top","navigation","author","read-time"],"performance":{},"importantUsageNotes":"Use for article pages that need breadcrumb navigation, social sharing controls, a sticky TOC, and optional back-to-top behavior. The author prop is an object with name, image, and role; do not use unsupported authorName, authorRole, or shareUrls props. heroImageSrc and author.image must be absolute image URLs only, never placeholder variables, relative /images paths, logos, favicons, or video URLs.","usageRequirements":{"requiredProps":["breadcrumbs","currentPage","title","author","heroImageSrc","heroImageAlt","sections","markdownString"],"propConstraints":{"breadcrumbs":{"required":true,"minItems":1,"maxItems":4},"breadcrumbs[].label":{"required":true,"maxLength":40},"breadcrumbs[].href":{"required":true},"currentPage":{"required":true,"maxLength":80},"title":{"required":true,"maxLength":100},"description":{"required":false,"maxLength":240},"author":{"required":true,"note":"Source-backed article author object."},"author.name":{"required":true,"maxLength":80},"author.role":{"required":false,"maxLength":80},"author.image":{"required":false,"note":"Absolute author/profile image URL. IMAGE MEDIA ONLY."},"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."},"author.image":{"path":"author.image","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.","Do not use unsupported shareUrls, authorName, or authorRole props with this block."]}}},"timestamp":"2026-06-27T20:12:12.137Z"}