{"success":true,"data":{"block":{"id":"article-chapters-author","name":"Article Chapters Author","title":"Article Chapters Author","category":"Article","categorySlug":"article","description":"A book-style article layout with numbered chapters navigation in a sticky sidebar, detailed author bio with social links, and a conclusion CTA card. Features breadcrumb navigation, centered title section, and IntersectionObserver-based chapter tracking. Perfect for comprehensive guides, tutorials, and educational content organized into distinct chapters.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/308410/iacfzeqo53pt6fshnehvci94rrst/article-chapters-author-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308409/yw7b8x4sk3uyhv741q60ou5ezyg4/article-chapters-author-mobile.jpg"},"componentPath":"blocks/article/article-chapters-author.tsx","code":"import { ArticleChaptersAuthor } from \"@opensite/ui/blocks/article/article-chapters-author\";\nimport { LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\nconst ARTICLE_IMAGE_URL =\n  \"https://toastability-production.s3.amazonaws.com/1xdx70c7gp9l883soyh5d3exesvt\";\n\nexport default function Demo() {\n  return (\n    <ArticleChaptersAuthor\n      breadcrumbs={[\n        { label: \"Resources\", href: \"#resources\" },\n        { label: \"Guides\", href: \"#guides\" },\n      ]}\n      pattern=\"squareAltGrid\"\n      patternOpacity={0.7}\n      background=\"muted\"\n      currentPage=\"Design Patterns\"\n      title=\"The Complete Guide to Design Patterns\"\n      subtitle=\"Master the fundamental patterns that power modern software architecture\"\n      heroImageSrc={ARTICLE_IMAGE_URL}\n      heroImageAlt=\"Software architecture visualization\"\n      chapters={[\n        { id: \"chapter-1\", number: 1, title: \"The Foundation\" },\n        { id: \"chapter-2\", number: 2, title: \"Building Blocks\" },\n        { id: \"chapter-3\", number: 3, title: \"Advanced Patterns\" },\n        { id: \"chapter-4\", number: 4, title: \"Real-World Applications\" },\n        { id: \"chapter-5\", number: 5, title: \"Future Directions\" },\n      ]}\n      author={{\n        name: \"Dr. Marcus Chen\",\n        role: \"Principal Engineer\",\n        image: ARTICLE_IMAGE_URL,\n        bio: \"Marcus has over 15 years of experience designing large-scale distributed systems. He's the author of three books on software architecture and a frequent speaker at tech conferences.\",\n        socialLinks: [\n          {\n            href: \"https://instagram.com\",\n          },\n          {\n            href: \"https://twitter.com\",\n          },\n          {\n            href: \"https://linkedin.com\",\n          },\n          {\n            href: \"https://youtube.com\",\n          },\n        ],\n      }}\n      conclusionTitle=\"Ready to Master Design Patterns?\"\n      conclusionDescription=\"Take your software architecture skills to the next level with our comprehensive course and interactive workshops.\"\n      conclusionActions={[\n        {\n          label: \"Enroll in Course\",\n          href: \"#\",\n          variant: \"default\",\n        },\n        {\n          label: \"Download Resources\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      enableChapterTracking={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},"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},"subtitleClassName":{"type":"string","description":"Additional CSS classes for the subtitle","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","required":false},"articleClassName":{"type":"string","description":"Additional CSS classes for the article content","required":false},"chaptersClassName":{"type":"string","description":"Additional CSS classes for the chapters nav","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author card","required":false},"conclusionClassName":{"type":"string","description":"Additional CSS classes for the conclusion section","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},"subtitle":{"type":"object","description":"Article subtitle","typeLabel":"React.ReactNode","required":true,"maxLength":180},"chapters":{"type":"array","description":"Chapter navigation items","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"number":{"type":"number","description":"","required":true},"title":{"type":"string","description":"","required":true}},"typeLabel":"ArticleChapter"},"typeLabel":"ArticleChapter[]","required":true,"minItems":3,"maxItems":7},"chaptersSlot":{"type":"object","description":"Custom slot for rendering chapters nav (overrides chapters array)","typeLabel":"React.ReactNode","required":false},"renderChapterLink":{"type":"object","description":"Render callback for chapter links (overrides default rendering)","typeLabel":"(chapter: ArticleChapter, isActive: boolean) => React.ReactNode","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":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},"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},"conclusionTitle":{"type":"object","description":"Conclusion section title","typeLabel":"React.ReactNode","required":false},"conclusionDescription":{"type":"object","description":"Conclusion section description","typeLabel":"React.ReactNode","required":false},"conclusionActions":{"type":"array","description":"Conclusion 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},"conclusionSlot":{"type":"object","description":"Custom slot for conclusion section (overrides conclusion props)","typeLabel":"React.ReactNode","required":false},"markdownString":{"type":"string","description":"Markdown string to render","required":true,"maxLength":14000},"markdownStyles":{"type":"object","description":"Custom className mappings for markdown elements","typeLabel":"MarkdownStylesMap","required":false},"enableChapterTracking":{"type":"boolean","description":"Enable scroll-based chapter 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},"chapters[].id":{"type":"object","description":"","required":true},"chapters[].number":{"type":"object","description":"","required":true},"chapters[].title":{"type":"object","description":"","required":true,"maxLength":60},"author.name":{"type":"object","description":"","required":true,"maxLength":80},"author.role":{"type":"object","description":"","required":false,"maxLength":80},"author.bio":{"type":"object","description":"","required":false,"maxLength":320},"author.image":{"type":"object","description":"","required":false}},"exampleProps":{"breadcrumbs":[{"label":"Resources","href":"#"},{"label":"Guides","href":"#"}],"currentPage":"Design Patterns","title":"The Complete Guide to Design Patterns","subtitle":"A source-backed guide to patterns that power modern software architecture","heroImageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","heroImageAlt":"Software architecture planning workspace","chapters":[{"id":"overview","number":1,"title":"Overview"},{"id":"implementation","number":2,"title":"Implementation"},{"id":"conclusion","number":3,"title":"Conclusion"}],"author":{"name":"Dr. Marcus Chen","role":"Principal Engineer","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","bio":"Marcus writes source-backed guides on software architecture and distributed systems.","socialLinks":{"linkedin":"https://linkedin.com"}},"conclusionTitle":"Continue Learning","conclusionDescription":"Read the next guide in this source-backed series.","conclusionActions":[{"label":"View Guides","href":"#","variant":"default"},{"label":"Download Notes","href":"#","variant":"outline"}],"enableChapterTracking":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","chapters","book-style","author-bio","social-links","sidebar","guide","tutorial","educational"],"performance":{},"importantUsageNotes":"Use for comprehensive guide-style articles organized into numbered chapters with an author bio and conclusion CTA. chapters[].id must map to real headings in markdownString when tracking is enabled. heroImageSrc and author.image must be absolute image URLs only, never placeholder variables, relative /images paths, logos, favicons, or video URLs. Author identity, bio, and social links must be source-backed.","usageRequirements":{"requiredProps":["title","subtitle","chapters","author","heroImageSrc","heroImageAlt","markdownString"],"propConstraints":{"breadcrumbs":{"required":false,"minItems":1,"maxItems":4},"currentPage":{"required":false,"maxLength":80},"title":{"required":true,"maxLength":100},"subtitle":{"required":true,"maxLength":180},"chapters":{"required":true,"minItems":3,"maxItems":7},"chapters[].id":{"required":true,"note":"Must match a heading id in markdownString."},"chapters[].number":{"required":true},"chapters[].title":{"required":true,"maxLength":60},"author":{"required":true,"note":"Source-backed author bio object."},"author.name":{"required":true,"maxLength":80},"author.role":{"required":false,"maxLength":80},"author.bio":{"required":false,"maxLength":320},"author.image":{"required":false,"note":"Absolute author/profile image URL. IMAGE MEDIA ONLY."},"heroImageSrc":{"required":true,"note":"Absolute article hero image URL. IMAGE MEDIA ONLY."},"heroImageAlt":{"required":true,"maxLength":140},"conclusionActions":{"required":false,"maxItems":2,"note":"Use ActionConfig objects with label, href, and variant."},"markdownString":{"required":true,"maxLength":14000,"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."]}}},"timestamp":"2026-06-27T20:02:47.111Z"}