{"success":true,"data":{"category":{"slug":"article","name":"Article","description":"Collection of article components"},"blocks":[{"id":"article-hero-prose","name":"Article Hero Prose","title":"Article Hero Prose","category":"Article","categorySlug":"article","description":"A full-width content layout featuring a prominent hero media, author information with avatar, and rich prose content including alerts, tables, blockquotes, and lists. Ideal for long-form content that needs visual hierarchy with a strong opening media and detailed content sections.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/308414/9jhhnu0e4cpp3lyoh1rb5fwe0nm6/article-hero-prose-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308413/5rukvx6zsxmag8s61eshd8bzgmht/article-hero-prose-mobile.jpg"},"componentPath":"blocks/article/article-hero-prose.tsx","code":"import { ArticleHeroProse } from \"@opensite/ui/blocks/article/article-hero-prose\";\nimport { LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\nconst ARTICLE_IMAGE_URL =\n  \"https://toastability-production.s3.amazonaws.com/n001o4pfpszmyw03ubctig7kvf0e\";\n\nexport default function Demo() {\n  return (\n    <ArticleHeroProse\n      background=\"dark\"\n      pattern=\"gridFadeTopRight\"\n      patternOpacity={0.15}\n      post={{\n        title: \"The Evolution of Modern JavaScript: From ES6 to ES2026\",\n        description:\n          \"Explore how JavaScript has transformed over the past decade, introducing powerful features that have reshaped web development as we know it.\",\n        authorName: \"Alex Rodriguez\",\n        authorImage: ARTICLE_IMAGE_URL,\n        authorHref: \"#\",\n        image: ARTICLE_IMAGE_URL,\n        pubDate: new Date(\"2026-01-20\"),\n      }}\n      dateFormat=\"MMMM d, yyyy\"\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},"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},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author information","required":false},"heroImageClassName":{"type":"string","description":"Additional CSS classes for the hero media","required":false},"proseClassName":{"type":"string","description":"Additional CSS classes for the prose content","required":false},"post":{"type":"object","description":"Content metadata (title, author, media, etc.)","fields":{"title":{"type":"string","description":"","required":false},"authorName":{"type":"string","description":"","required":false},"authorHref":{"type":"string","description":"","required":false},"image":{"type":"string","description":"","required":false},"pubDate":{"type":"object","description":"","typeLabel":"Date","required":false},"description":{"type":"string","description":"","required":false},"authorImage":{"type":"string","description":"","required":false}},"typeLabel":"ArticleHeroProsePost","required":true,"mediaHints":{"path":"post.authorImage","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."}},"heroMediaSlot":{"type":"object","description":"Custom slot for hero media (overrides post.image)","typeLabel":"React.ReactNode","required":false},"authorSlot":{"type":"object","description":"Custom slot for author information (overrides post author fields)","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},"dateFormat":{"type":"string","description":"Date format string (date-fns format)","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"post.title":{"type":"object","description":"","required":true,"maxLength":90},"post.description":{"type":"object","description":"","required":true,"maxLength":220},"post.authorName":{"type":"object","description":"","required":true,"maxLength":80},"post.pubDate":{"type":"object","description":"","required":true},"post.image":{"type":"object","description":"","required":true},"post.authorImage":{"type":"object","description":"","required":false}},"exampleProps":{"post":{"title":"The Evolution of Modern JavaScript","description":"A source-backed analysis of how modern JavaScript patterns changed production web development.","authorName":"Alex Rodriguez","authorHref":"#","authorImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","pubDate":"2026-01-20T00:00:00.000Z"},"dateFormat":"MMMM d, yyyy","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","hero","prose","long-form","author","avatar","tables","alerts","blockquotes"],"performance":{},"importantUsageNotes":"Use for a full long-form article with a strong hero image, author metadata, and rich prose. The post.image and post.authorImage props must be absolute image URLs only, never logos, favicons, placeholder variables, relative /images paths, or video media. Use markdownString for the article body and keep post metadata source-backed.","usageRequirements":{"requiredProps":["post","markdownString"],"propConstraints":{"post":{"required":true,"note":"Source-backed article metadata object."},"post.title":{"required":true,"maxLength":90},"post.description":{"required":true,"maxLength":220},"post.authorName":{"required":true,"maxLength":80,"note":"Must identify a real article author or organization byline."},"post.pubDate":{"required":true,"note":"Use a real publication date as a Date-compatible value."},"post.image":{"required":true,"note":"Absolute hero image URL. IMAGE MEDIA ONLY."},"post.authorImage":{"required":false,"note":"Absolute author/profile image URL. IMAGE MEDIA ONLY."},"markdownString":{"required":true,"maxLength":12000,"note":"Long-form markdown article body."}},"mediaSlots":{"post.image":{"path":"post.image","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."},"post.authorImage":{"path":"post.authorImage","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."]}},{"id":"article-sidebar-sticky","name":"Article Sidebar Sticky","title":"Article Sidebar Sticky","category":"Article","categorySlug":"article","description":"A two-column article layout with a sticky sidebar containing author information and a back navigation link. The main content area features prose styling with images and blockquotes. Perfect for documentation-style articles or blog posts where persistent author attribution and navigation are important.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/308416/fv1f2p5pc2a2hknexrljmw8o3zhc/article-sidebar-sticky-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308415/lb9wvq1zvqmugjkmfv69a4l4uljh/article-sidebar-sticky-mobile.jpg"},"componentPath":"blocks/article/article-sidebar-sticky.tsx","code":"import { ArticleSidebarSticky } from \"@opensite/ui/blocks/article/article-sidebar-sticky\";\nimport { LONG_FORM_MARKDOWN_STRING, optixFlowApiKey } from \"@/lib/media\";\n\nconst ARTICLE_IMAGE_URL =\n  \"https://toastability-production.s3.amazonaws.com/l080sx0lcx51x44dqrb8006nqf08\";\n\nexport default function Demo() {\n  return (\n    <ArticleSidebarSticky\n      backHref=\"#\"\n      backText=\"Back to Blog\"\n      title=\"Mastering React Server Components: A Deep Dive\"\n      authorName=\"Emma Thompson\"\n      authorImage={ARTICLE_IMAGE_URL}\n      authorHref=\"#\"\n      publishDate=\"January 18, 2026\"\n      heroImageSrc={ARTICLE_IMAGE_URL}\n      heroImageAlt=\"React Server Components architecture\"\n      background=\"white\"\n      pattern=\"dashedGridBasic\"\n      patternOpacity={1}\n      markdownString={LONG_FORM_MARKDOWN_STRING}\n      optixFlowConfig={{ apiKey: optixFlowApiKey as 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},"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},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"summary":{"type":"object","description":"Optional Summary to be placed below the title","typeLabel":"React.ReactNode","required":false,"maxLength":240},"summaryClassName":{"type":"string","description":"Additional CSS classes for the summary","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author info","required":false},"heroImageClassName":{"type":"string","description":"Additional CSS classes for the hero image","required":false},"backLinkClassName":{"type":"string","description":"Additional CSS classes for the back link","required":false},"backHref":{"type":"string","description":"Back link href","required":false},"backText":{"type":"object","description":"Back link text","typeLabel":"React.ReactNode","required":false},"backIcon":{"type":"object","description":"Back link icon (defaults to chevron-left)","typeLabel":"React.ReactNode","required":false},"backLinkSlot":{"type":"object","description":"Custom slot for back link (overrides backHref, backText, backIcon)","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Article title","typeLabel":"React.ReactNode","required":true,"maxLength":90},"authorName":{"type":"string","description":"Author name","required":true,"maxLength":80},"authorImage":{"type":"string","description":"Author image URL","required":false,"mediaHints":{"path":"authorImage","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."}},"authorHref":{"type":"string","description":"Author profile href","required":false},"publishDate":{"type":"object","description":"Publish date string","typeLabel":"React.ReactNode","required":true,"maxLength":40},"authorSlot":{"type":"object","description":"Custom slot for author info (overrides author props)","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},"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},"sidebarContent":{"type":"object","description":"Sidebar content","typeLabel":"React.ReactNode","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"backHref":"#","backText":"Back to Blog","title":"Mastering React Server Components","authorName":"Emma Thompson","authorImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","authorHref":"#","publishDate":"January 18, 2026","heroImageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","heroImageAlt":"React Server Components architecture","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","sidebar","sticky","author","navigation","prose","two-column","documentation"],"performance":{},"importantUsageNotes":"Use for long-form articles where a sticky sidebar with back navigation and author attribution should remain visible. heroImageSrc and authorImage must be absolute image URLs only. Do not use placeholder media variables, relative /images paths, logos, favicons, or video URLs. Keep title, authorName, publishDate, and markdownString grounded in the source article.","usageRequirements":{"requiredProps":["title","authorName","publishDate","heroImageSrc","heroImageAlt","markdownString"],"propConstraints":{"title":{"required":true,"maxLength":90},"summary":{"required":false,"maxLength":240,"note":"Optional article summary displayed near the title."},"authorName":{"required":true,"maxLength":80,"note":"Must identify a real article author or organization byline."},"publishDate":{"required":true,"maxLength":40,"note":"Human-readable publication date from the source post."},"heroImageSrc":{"required":true,"note":"Absolute article hero image URL. IMAGE MEDIA ONLY."},"heroImageAlt":{"required":true,"maxLength":140},"authorImage":{"required":false,"note":"Absolute author/profile image URL. IMAGE MEDIA ONLY."},"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."},"authorImage":{"path":"authorImage","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."]}},{"id":"article-toc-sidebar","name":"Article TOC Sidebar","title":"Article TOC Sidebar","category":"Article","categorySlug":"article","description":"An article layout with a sticky table of contents sidebar that highlights the active section as users scroll. Includes a CTA card in the sidebar, category badge, author info, and IntersectionObserver-based section tracking. Ideal for technical tutorials, guides, and long-form content that benefits from easy navigation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/308420/9xlgnxxtpxnmyyfanvn4wwq4u1pc/article-toc-sidebar-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308419/anzis15zt533vqsfgfjpehjawg0v/article-toc-sidebar-mobile.jpg"},"componentPath":"blocks/article/article-toc-sidebar.tsx","code":"import { ArticleTocSidebar } from \"@opensite/ui/blocks/article/article-toc-sidebar\";\nimport { LONG_FORM_MARKDOWN_STRING } from \"@/lib/media\";\n\nconst ARTICLE_IMAGE_URL =\n  \"https://toastability-production.s3.amazonaws.com/gg5qnvb4nsl2k3g4dw4ls8bsllwh\";\n\nexport default function Demo() {\n  return (\n    <ArticleTocSidebar\n      category=\"Development\"\n      title=\"Building Scalable Systems: A Comprehensive Guide\"\n      description=\"Learn the principles, patterns, and practices that enable applications to grow gracefully from prototype to production scale.\"\n      authorName=\"Michael Zhang\"\n      authorImage={ARTICLE_IMAGE_URL}\n      authorHref=\"#\"\n      publishDate=\"January 12, 2026\"\n      readTime=\"20 min read\"\n      heroImageSrc={ARTICLE_IMAGE_URL}\n      heroImageAlt=\"Scalable architecture diagram\"\n      sections={[\n        { id: \"introduction\", title: \"Introduction\" },\n        { id: \"getting-started\", title: \"Getting Started\" },\n        { id: \"core-concepts\", title: \"Core Concepts\" },\n        { id: \"best-practices\", title: \"Best Practices\" },\n        { id: \"conclusion\", title: \"Conclusion\" },\n      ]}\n      ctaTitle=\"Want to Learn More?\"\n      ctaDescription=\"Join our upcoming workshop on scalable system design and architecture patterns.\"\n      ctaActions={[\n        {\n          label: \"Register for Workshop\",\n          href: \"#\",\n          variant: \"default\",\n          className: \"w-full\",\n        },\n      ]}\n      enableTocTracking={true}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.15}\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},"articleClassName":{"type":"string","description":"Additional CSS classes for the article content","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","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},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author info","required":false},"tocClassName":{"type":"string","description":"Additional CSS classes for the TOC","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA section","required":false},"heroImageClassName":{"type":"string","description":"Additional CSS classes for the hero image","required":false},"title":{"type":"object","description":"Article title","typeLabel":"React.ReactNode","required":true,"maxLength":90},"description":{"type":"object","description":"Article description","typeLabel":"React.ReactNode","required":true,"maxLength":240},"authorName":{"type":"string","description":"Author name","required":false,"maxLength":80},"authorImage":{"type":"string","description":"Author image URL","required":false,"mediaHints":{"path":"authorImage","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."}},"authorHref":{"type":"string","description":"Author profile href","required":false},"publishDate":{"type":"object","description":"Publish date string","typeLabel":"React.ReactNode","required":false,"maxLength":40},"readTime":{"type":"object","description":"Read time string","typeLabel":"React.ReactNode","required":false,"maxLength":30},"authorSlot":{"type":"object","description":"Custom slot for author info (overrides author props)","typeLabel":"React.ReactNode","required":false},"category":{"type":"object","description":"Category badge text","typeLabel":"React.ReactNode","required":false,"maxLength":40},"categorySlot":{"type":"object","description":"Custom slot for category badge (overrides category)","typeLabel":"React.ReactNode","required":false},"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":"ArticleTocSection"},"typeLabel":"ArticleTocSection[]","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: ArticleTocSection, 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},"ctaTitle":{"type":"object","description":"CTA section title","typeLabel":"React.ReactNode","required":false},"ctaDescription":{"type":"object","description":"CTA section description","typeLabel":"React.ReactNode","required":false},"ctaActions":{"type":"array","description":"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},"ctaSlot":{"type":"object","description":"Custom slot for CTA section (overrides CTA props)","typeLabel":"React.ReactNode","required":false},"markdownString":{"type":"string","description":"Markdown string to render (when renderMode is \"markdown\")","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":{"category":"Development","title":"Building Scalable Systems","description":"A source-backed guide to patterns that help applications grow from prototype to production.","authorName":"Michael Zhang","authorImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","authorHref":"#","publishDate":"January 12, 2026","readTime":"20 min read","heroImageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","heroImageAlt":"Scalable architecture planning session","sections":[{"id":"overview","title":"Overview"},{"id":"implementation","title":"Implementation"},{"id":"conclusion","title":"Conclusion"}],"ctaTitle":"Explore More Guides","ctaDescription":"Read the next source-backed article in this series.","ctaActions":[{"label":"View Guides","href":"#","variant":"default"}],"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","table-of-contents","sidebar","sticky","navigation","tutorial","guide","cta"],"performance":{},"importantUsageNotes":"Use for technical tutorials, guides, and long-form articles that need sticky table-of-contents navigation. sections[].id must map to real headings in markdownString when tracking is enabled. heroImageSrc and authorImage must be absolute image URLs only. Do not use placeholder media variables, relative /images paths, logos, favicons, or video URLs.","usageRequirements":{"requiredProps":["title","description","sections","heroImageSrc","heroImageAlt","markdownString"],"propConstraints":{"title":{"required":true,"maxLength":90},"description":{"required":true,"maxLength":240},"category":{"required":false,"maxLength":40},"authorName":{"required":false,"maxLength":80,"note":"Must identify a real article author or organization byline when supplied."},"publishDate":{"required":false,"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},"authorImage":{"required":false,"note":"Absolute author/profile image URL. IMAGE MEDIA ONLY."},"ctaActions":{"required":false,"maxItems":2,"note":"Use ActionConfig objects; do not use ctaText, ctaHref, or ctaButtonText."},"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."},"authorImage":{"path":"authorImage","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."]}},{"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."]}},{"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."]}},{"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."]}},{"id":"article-split-animated","name":"Article Split Animated","title":"Article Split Animated","category":"Article","categorySlug":"article","description":"A visually striking split-layout article preview with Framer Motion animations. Features a large image on one side with a gradient overlay and category badge, and article details on the other side including title, description, author info, and CTA button. Ideal for featured article sections, hero posts, and content that needs to make a strong visual impact.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/308418/gsryhfv3acwx0q9swvs9xtqp812w/article-split-animated-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308417/i82pr6xk8ifd56ju1bv8lurohrq0/article-split-animated-mobile.jpg"},"componentPath":"blocks/article/article-split-animated.tsx","code":"import { ArticleSplitAnimated } from \"@opensite/ui/blocks/article/article-split-animated\";\n\nconst ARTICLE_IMAGE_URL =\n  \"https://toastability-production.s3.amazonaws.com/2t36c7l0ywchaz4nys8yj2l5amae\";\n\nexport default function Demo() {\n  return (\n    <ArticleSplitAnimated\n      image={ARTICLE_IMAGE_URL}\n      background=\"dark\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.15}\n      imageAlt=\"AI-powered development workflow\"\n      category=\"Artificial Intelligence\"\n      categoryHref=\"#\"\n      title=\"The Future of AI-Assisted Development\"\n      description=\"Discover how artificial intelligence is transforming the software development lifecycle, from code generation to automated testing and deployment.\"\n      authorName=\"Dr. Raj Patel\"\n      authorImage={ARTICLE_IMAGE_URL}\n      authorRole=\"AI Research Lead\"\n      authorHref=\"#\"\n      publishDate=\"January 25, 2026\"\n      readTime=\"15 min read\"\n      ctaActions={[\n        {\n          label: \"Read Full Article\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n      ]}\n      enableAnimations={true}\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},"imageContainerClassName":{"type":"string","description":"Additional CSS classes for the image container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content container","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author info","required":false},"categoryClassName":{"type":"string","description":"Additional CSS classes for the category badge","required":false},"metaClassName":{"type":"string","description":"Additional CSS classes for the meta info (date, read time)","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA section","required":false},"title":{"type":"object","description":"Article title","typeLabel":"React.ReactNode","required":true,"maxLength":90},"description":{"type":"object","description":"Article description","typeLabel":"React.ReactNode","required":true,"maxLength":220},"image":{"type":"string","description":"Hero image source URL","required":true,"mediaHints":{"path":"image","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"xlarge","required":true,"preferredAspect":"16:9","note":"Featured article image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"imageAlt":{"type":"string","description":"Hero image alt text","required":true,"maxLength":140},"heroMediaSlot":{"type":"object","description":"Custom slot for hero media (overrides image)","typeLabel":"React.ReactNode","required":false},"authorName":{"type":"string","description":"Author name","required":false,"maxLength":80},"authorImage":{"type":"string","description":"Author image URL","required":false,"mediaHints":{"path":"authorImage","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."}},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"React.ReactNode","required":false,"maxLength":80},"authorHref":{"type":"string","description":"Author profile href","required":false},"authorSlot":{"type":"object","description":"Custom slot for author info (overrides author props)","typeLabel":"React.ReactNode","required":false},"publishDate":{"type":"object","description":"Publish date string","typeLabel":"React.ReactNode","required":false,"maxLength":40},"readTime":{"type":"object","description":"Read time string","typeLabel":"React.ReactNode","required":false,"maxLength":30},"category":{"type":"object","description":"Category text","typeLabel":"React.ReactNode","required":false,"maxLength":50},"categoryHref":{"type":"string","description":"Category link href","required":false},"categorySlot":{"type":"object","description":"Custom slot for category badge (overrides category)","typeLabel":"React.ReactNode","required":false},"ctaActions":{"type":"array","description":"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":true,"minItems":1,"maxItems":2},"ctaSlot":{"type":"object","description":"Custom slot for CTA section (overrides ctaActions)","typeLabel":"React.ReactNode","required":false},"enableAnimations":{"type":"boolean","description":"Enable entrance animations","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"AI-assisted development workflow","category":"Artificial Intelligence","categoryHref":"#","title":"The Future of AI-Assisted Development","description":"A source-backed featured article about how AI is changing software delivery workflows.","authorName":"Dr. Raj Patel","authorImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","authorRole":"AI Research Lead","authorHref":"#","publishDate":"January 25, 2026","readTime":"15 min read","ctaActions":[{"label":"Read Full Article","href":"#","variant":"default","size":"lg"}],"enableAnimations":true},"dependencies":["@opensite/ui"],"tags":["article","blog-post","split-layout","animated","framer-motion","featured","hero","visual-impact","cta"],"performance":{},"importantUsageNotes":"Use for a featured article or hero post preview, not as a full article body. image and authorImage must be absolute image URLs only, never placeholder variables, relative /images paths, logos, favicons, or video URLs. Use ctaActions ActionConfig objects; this component does not accept ctaText or ctaHref props.","usageRequirements":{"requiredProps":["title","description","image","imageAlt","ctaActions"],"propConstraints":{"title":{"required":true,"maxLength":90},"description":{"required":true,"maxLength":220},"image":{"required":true,"note":"Absolute featured article image URL. IMAGE MEDIA ONLY."},"imageAlt":{"required":true,"maxLength":140},"category":{"required":false,"maxLength":50},"authorName":{"required":false,"maxLength":80,"note":"Must identify a real article author or organization byline when supplied."},"authorImage":{"required":false,"note":"Absolute author/profile image URL. IMAGE MEDIA ONLY."},"authorRole":{"required":false,"maxLength":80},"publishDate":{"required":false,"maxLength":40},"readTime":{"required":false,"maxLength":30},"ctaActions":{"required":true,"minItems":1,"maxItems":2,"note":"Use ActionConfig objects; do not use ctaText or ctaHref."}},"mediaSlots":{"image":{"path":"image","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"xlarge","required":true,"preferredAspect":"16:9","note":"Featured article image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"authorImage":{"path":"authorImage","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.","Use ctaActions instead of unsupported ctaText or ctaHref props."]}}]},"timestamp":"2026-06-27T18:46:59.114Z"}