{"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/293088/ffidy6dd0oux8j9j98bnnkvdusb2/cleanshot-2026-03-03-at-13-22-35.png","mobile":"https://cdn.ing/assets/i/r/293087/fza7b6gqmv42zwt7exjdv4ddn42c/cleanshot-2026-03-03-at-13-22-54.png"},"componentPath":"blocks/article/article-chapters-author.tsx","code":"import { ArticleChaptersAuthor } from \"@opensite/ui/blocks/article/article-chapters-author\";\nimport { imagePlaceholders, LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\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={imagePlaceholders[73]}\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: imagePlaceholders[88],\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},"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},"subtitle":{"type":"object","description":"Article subtitle","typeLabel":"React.ReactNode","required":false},"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":false},"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":false},"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":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},"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},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["article","blog-post","chapters","book-style","author-bio","social-links","sidebar","guide","tutorial","educational"],"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 chapter that map exactly to the `chapters` `id` value. Ensure to only use the author.ame, author.image, author.bio, author.socialLinks, and author.role fields if you have actual data to populate those fields, using empty/fake data is not acceptable! Ensure to ONLY use valid `href` values for the `conclusionActions`"}},"timestamp":"2026-05-13T10:39:26.059Z"}