{"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","enum":["default","white","gray","dark","gradient","primary","secondary","transparent","muted"],"required":false},"spacing":{"type":"string","description":"Vertical spacing for the section","typeLabel":"SectionSpacing","enum":["none","sm","md","lg","xl","hero"],"required":false},"pattern":{"type":"string","description":"Background pattern","typeLabel":"PatternName","enum":["squareAltGrid","grid1","noise","dotPattern","dotPattern2","circles","waves","crossPattern","architect","tinyCheckers","p6","dots","circuitBoardBasic","circuitBoardFadeTop","circuitBoardFadeBottom","circuitBoardFadeCenter","circuitBoardFadeTopLeft","circuitBoardFadeTopRight","circuitBoardFadeBottomLeft","circuitBoardFadeBottomRight","dashedGridBasic","dashedGridFadeTop","dashedGridFadeBottom","dashedGridFadeCenter","dashedGridFadeTopLeft","dashedGridFadeTopRight","dashedGridFadeBottomLeft","dashedGridFadeBottomRight","diagonalCrossBasic","diagonalCrossFadeTop","diagonalCrossFadeBottom","diagonalCrossFadeCenter","diagonalCrossFadeTopLeft","diagonalCrossFadeTopRight","diagonalCrossFadeBottomLeft","diagonalCrossFadeBottomRight","gridBasic","gridFadeTop","gridFadeBottom","gridFadeCenter","gridFadeTopLeft","gridFadeTopRight","gridFadeBottomLeft","gridFadeBottomRight","gridDotsBasic","gridDotsFadeCenter","gradientGlowTop","gradientGlowBottom","spotlightLeft","spotlightRight","radialGradientTop","radialGradientBottom"],"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 | string","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","enum":["default","white","gray","dark","gradient","primary","secondary","transparent","muted"],"required":false},"spacing":{"type":"string","description":"Vertical spacing for the section","typeLabel":"SectionSpacing","enum":["none","sm","md","lg","xl","hero"],"required":false},"pattern":{"type":"string","description":"Background pattern","typeLabel":"PatternName","enum":["squareAltGrid","grid1","noise","dotPattern","dotPattern2","circles","waves","crossPattern","architect","tinyCheckers","p6","dots","circuitBoardBasic","circuitBoardFadeTop","circuitBoardFadeBottom","circuitBoardFadeCenter","circuitBoardFadeTopLeft","circuitBoardFadeTopRight","circuitBoardFadeBottomLeft","circuitBoardFadeBottomRight","dashedGridBasic","dashedGridFadeTop","dashedGridFadeBottom","dashedGridFadeCenter","dashedGridFadeTopLeft","dashedGridFadeTopRight","dashedGridFadeBottomLeft","dashedGridFadeBottomRight","diagonalCrossBasic","diagonalCrossFadeTop","diagonalCrossFadeBottom","diagonalCrossFadeCenter","diagonalCrossFadeTopLeft","diagonalCrossFadeTopRight","diagonalCrossFadeBottomLeft","diagonalCrossFadeBottomRight","gridBasic","gridFadeTop","gridFadeBottom","gridFadeCenter","gridFadeTopLeft","gridFadeTopRight","gridFadeBottomLeft","gridFadeBottomRight","gridDotsBasic","gridDotsFadeCenter","gradientGlowTop","gradientGlowBottom","spotlightLeft","spotlightRight","radialGradientTop","radialGradientBottom"],"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\"","enum":["default","destructive","outline","secondary","ghost","link"],"required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","enum":["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 | string","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode | string","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","enum":["default","white","gray","dark","gradient","primary","secondary","transparent","muted"],"required":false},"spacing":{"type":"string","description":"Vertical spacing for the section","typeLabel":"SectionSpacing","enum":["none","sm","md","lg","xl","hero"],"required":false},"pattern":{"type":"string","description":"Background pattern","typeLabel":"PatternName","enum":["squareAltGrid","grid1","noise","dotPattern","dotPattern2","circles","waves","crossPattern","architect","tinyCheckers","p6","dots","circuitBoardBasic","circuitBoardFadeTop","circuitBoardFadeBottom","circuitBoardFadeCenter","circuitBoardFadeTopLeft","circuitBoardFadeTopRight","circuitBoardFadeBottomLeft","circuitBoardFadeBottomRight","dashedGridBasic","dashedGridFadeTop","dashedGridFadeBottom","dashedGridFadeCenter","dashedGridFadeTopLeft","dashedGridFadeTopRight","dashedGridFadeBottomLeft","dashedGridFadeBottomRight","diagonalCrossBasic","diagonalCrossFadeTop","diagonalCrossFadeBottom","diagonalCrossFadeCenter","diagonalCrossFadeTopLeft","diagonalCrossFadeTopRight","diagonalCrossFadeBottomLeft","diagonalCrossFadeBottomRight","gridBasic","gridFadeTop","gridFadeBottom","gridFadeCenter","gridFadeTopLeft","gridFadeTopRight","gridFadeBottomLeft","gridFadeBottomRight","gridDotsBasic","gridDotsFadeCenter","gradientGlowTop","gradientGlowBottom","spotlightLeft","spotlightRight","radialGradientTop","radialGradientBottom"],"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/315794/w9lekutuqfeg0gnu960v21oigwdq/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","enum":["default","white","gray","dark","gradient","primary","secondary","transparent","muted"],"required":false},"spacing":{"type":"string","description":"Vertical spacing for the section","typeLabel":"SectionSpacing","enum":["none","sm","md","lg","xl","hero"],"required":false},"pattern":{"type":"string","description":"Background pattern","typeLabel":"PatternName","enum":["squareAltGrid","grid1","noise","dotPattern","dotPattern2","circles","waves","crossPattern","architect","tinyCheckers","p6","dots","circuitBoardBasic","circuitBoardFadeTop","circuitBoardFadeBottom","circuitBoardFadeCenter","circuitBoardFadeTopLeft","circuitBoardFadeTopRight","circuitBoardFadeBottomLeft","circuitBoardFadeBottomRight","dashedGridBasic","dashedGridFadeTop","dashedGridFadeBottom","dashedGridFadeCenter","dashedGridFadeTopLeft","dashedGridFadeTopRight","dashedGridFadeBottomLeft","dashedGridFadeBottomRight","diagonalCrossBasic","diagonalCrossFadeTop","diagonalCrossFadeBottom","diagonalCrossFadeCenter","diagonalCrossFadeTopLeft","diagonalCrossFadeTopRight","diagonalCrossFadeBottomLeft","diagonalCrossFadeBottomRight","gridBasic","gridFadeTop","gridFadeBottom","gridFadeCenter","gridFadeTopLeft","gridFadeTopRight","gridFadeBottomLeft","gridFadeBottomRight","gridDotsBasic","gridDotsFadeCenter","gradientGlowTop","gradientGlowBottom","spotlightLeft","spotlightRight","radialGradientTop","radialGradientBottom"],"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","enum":["default","white","gray","dark","gradient","primary","secondary","transparent","muted"],"required":false},"spacing":{"type":"string","description":"Vertical spacing for the section","typeLabel":"SectionSpacing","enum":["none","sm","md","lg","xl","hero"],"required":false},"pattern":{"type":"string","description":"Background pattern","typeLabel":"PatternName","enum":["squareAltGrid","grid1","noise","dotPattern","dotPattern2","circles","waves","crossPattern","architect","tinyCheckers","p6","dots","circuitBoardBasic","circuitBoardFadeTop","circuitBoardFadeBottom","circuitBoardFadeCenter","circuitBoardFadeTopLeft","circuitBoardFadeTopRight","circuitBoardFadeBottomLeft","circuitBoardFadeBottomRight","dashedGridBasic","dashedGridFadeTop","dashedGridFadeBottom","dashedGridFadeCenter","dashedGridFadeTopLeft","dashedGridFadeTopRight","dashedGridFadeBottomLeft","dashedGridFadeBottomRight","diagonalCrossBasic","diagonalCrossFadeTop","diagonalCrossFadeBottom","diagonalCrossFadeCenter","diagonalCrossFadeTopLeft","diagonalCrossFadeTopRight","diagonalCrossFadeBottomLeft","diagonalCrossFadeBottomRight","gridBasic","gridFadeTop","gridFadeBottom","gridFadeCenter","gridFadeTopLeft","gridFadeTopRight","gridFadeBottomLeft","gridFadeBottomRight","gridDotsBasic","gridDotsFadeCenter","gradientGlowTop","gradientGlowBottom","spotlightLeft","spotlightRight","radialGradientTop","radialGradientBottom"],"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\"","enum":["default","destructive","outline","secondary","ghost","link"],"required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","enum":["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 | string","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode | string","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","enum":["default","white","gray","dark","gradient","primary","secondary","transparent","muted"],"required":false},"spacing":{"type":"string","description":"Vertical spacing for the section","typeLabel":"SectionSpacing","enum":["none","sm","md","lg","xl","hero"],"required":false},"pattern":{"type":"string","description":"Background pattern","typeLabel":"PatternName","enum":["squareAltGrid","grid1","noise","dotPattern","dotPattern2","circles","waves","crossPattern","architect","tinyCheckers","p6","dots","circuitBoardBasic","circuitBoardFadeTop","circuitBoardFadeBottom","circuitBoardFadeCenter","circuitBoardFadeTopLeft","circuitBoardFadeTopRight","circuitBoardFadeBottomLeft","circuitBoardFadeBottomRight","dashedGridBasic","dashedGridFadeTop","dashedGridFadeBottom","dashedGridFadeCenter","dashedGridFadeTopLeft","dashedGridFadeTopRight","dashedGridFadeBottomLeft","dashedGridFadeBottomRight","diagonalCrossBasic","diagonalCrossFadeTop","diagonalCrossFadeBottom","diagonalCrossFadeCenter","diagonalCrossFadeTopLeft","diagonalCrossFadeTopRight","diagonalCrossFadeBottomLeft","diagonalCrossFadeBottomRight","gridBasic","gridFadeTop","gridFadeBottom","gridFadeCenter","gridFadeTopLeft","gridFadeTopRight","gridFadeBottomLeft","gridFadeBottomRight","gridDotsBasic","gridDotsFadeCenter","gradientGlowTop","gradientGlowBottom","spotlightLeft","spotlightRight","radialGradientTop","radialGradientBottom"],"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-legal-prose","name":"Article Legal Prose","title":"Article Legal Prose","category":"Article","categorySlug":"article","description":"A clean single-column long-form prose layout for legal and policy documents: privacy policies, terms of use, terms of service, EULAs, cookie policies, disclaimers, and accessibility statements. Renders a document title, an optional last-updated line, and the entire document body as sectioned markdown prose. The standard block for legal pages — one block carries the whole document with no byline, publication date, or hero image.","thumbnail":{"desktop":"","mobile":""},"componentPath":"blocks/article/article-legal-prose.tsx","code":"import { ArticleLegalProse } from \"@opensite/ui/blocks/article/article-legal-prose\";\n\nexport default function Demo() {\n  return (\n    // The ENTIRE legal document lives in ONE block: full sectioned markdown in\n    // markdownString with ## headings. Supply lastUpdatedLabel/lastUpdatedDate\n    // only when a real revision date is known — omit both rather than invent one.\n    <ArticleLegalProse\n      title=\"Privacy Policy\"\n      lastUpdatedLabel=\"Last updated\"\n      lastUpdatedDate=\"March 12, 2026\"\n      markdownString={`## Overview\nThis policy explains what information this website collects and how that information is used.\n\n## Information We Collect\nContact details you submit through forms on this site, plus standard usage analytics.\n\n## How We Use Information\nWe use submitted information to respond to inquiries, operate the website, and improve our services.\n\n## Your Rights\nYou may request a copy of your personal data or ask for it to be deleted at any time.\n\n## Contact\nQuestions about this policy can be sent through this website's contact page.`}\n    />\n  );\n}","propsSchema":{"title":{"type":"string","description":"Document title rendered as the page heading, e.g. \"Privacy Policy\" or\n\"Terms of Use\".","required":true,"maxLength":90},"lastUpdatedLabel":{"type":"string","description":"Optional short label prefixing the revision line, e.g. \"Last updated\".\nRendered only when lastUpdatedDate is also supplied.","required":false,"maxLength":40},"lastUpdatedDate":{"type":"string","description":"Optional human-readable revision date string, e.g. \"March 12, 2026\".\nSupply a real date only; omit entirely when the revision date is unknown.","required":false,"maxLength":40},"markdownString":{"type":"string","description":"The complete legal document body as markdown. Use ## headings for the\ndocument's sections (e.g. \"## Information We Collect\").","required":true,"maxLength":16000},"markdownStyles":{"type":"object","description":"Custom className mappings for markdown elements","typeLabel":"MarkdownStylesMap","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration for images in markdown","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the document header (title + revision line)","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"proseClassName":{"type":"string","description":"Additional CSS classes for the prose content wrapper","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","enum":["default","white","gray","dark","gradient","primary","secondary","transparent","muted"],"required":false},"spacing":{"type":"string","description":"Vertical spacing for the section","typeLabel":"SectionSpacing","enum":["none","sm","md","lg","xl","hero"],"required":false},"pattern":{"type":"string","description":"Background pattern","typeLabel":"PatternName","enum":["squareAltGrid","grid1","noise","dotPattern","dotPattern2","circles","waves","crossPattern","architect","tinyCheckers","p6","dots","circuitBoardBasic","circuitBoardFadeTop","circuitBoardFadeBottom","circuitBoardFadeCenter","circuitBoardFadeTopLeft","circuitBoardFadeTopRight","circuitBoardFadeBottomLeft","circuitBoardFadeBottomRight","dashedGridBasic","dashedGridFadeTop","dashedGridFadeBottom","dashedGridFadeCenter","dashedGridFadeTopLeft","dashedGridFadeTopRight","dashedGridFadeBottomLeft","dashedGridFadeBottomRight","diagonalCrossBasic","diagonalCrossFadeTop","diagonalCrossFadeBottom","diagonalCrossFadeCenter","diagonalCrossFadeTopLeft","diagonalCrossFadeTopRight","diagonalCrossFadeBottomLeft","diagonalCrossFadeBottomRight","gridBasic","gridFadeTop","gridFadeBottom","gridFadeCenter","gridFadeTopLeft","gridFadeTopRight","gridFadeBottomLeft","gridFadeBottomRight","gridDotsBasic","gridDotsFadeCenter","gradientGlowTop","gradientGlowBottom","spotlightLeft","spotlightRight","radialGradientTop","radialGradientBottom"],"required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"title":"Privacy Policy","lastUpdatedLabel":"Last updated","lastUpdatedDate":"March 12, 2026","markdownString":"## Overview\nThis policy explains what information this website collects and how that information is used.\n\n## Information We Collect\nContact details submitted through forms on this site, plus standard usage analytics.\n\n## How We Use Information\nTo respond to inquiries, operate the website, and improve our services.\n\n## Your Rights\nYou may request a copy of your personal data or ask for it to be deleted at any time."},"dependencies":["@opensite/ui"],"tags":["article","legal","privacy-policy","terms-of-use","terms-of-service","eula","cookie-policy","disclaimer","policy","compliance","long-form","prose","document"],"performance":{},"importantUsageNotes":"THE block for legal and policy pages: privacy policies, terms of use, terms of service, EULAs, cookie policies, disclaimers, and accessibility statements. Compose the ENTIRE legal document as ONE block — put the complete sectioned document in markdownString using ## headings. Never split a legal document across FAQ accordions, feature grids, contact blocks, stats, or multiple blocks. This block has no byline, author, publication date, or hero image by design; supply lastUpdatedLabel and lastUpdatedDate only when a real revision date is known, otherwise omit both — never invent a date.","usageRequirements":{"requiredProps":["title","markdownString"],"propConstraints":{"title":{"required":true,"maxLength":90,"note":"The document name, e.g. \"Privacy Policy\" or \"Terms of Use\"."},"lastUpdatedLabel":{"required":false,"maxLength":40,"note":"Short label such as \"Last updated\". Rendered only when lastUpdatedDate is also supplied."},"lastUpdatedDate":{"required":false,"maxLength":40,"note":"Real revision date only; omit when unknown. Never fabricate a date."},"markdownString":{"required":true,"maxLength":16000,"note":"The complete legal document body as markdown with ## section headings."}},"mediaSlots":{},"requiresSiteCapabilities":[],"notes":["Use existing legal copy from source evidence when available; otherwise generate practical template legal copy grounded in the known business context. Never fabricate revision dates, bylines, company registration numbers, or regulator names."]}}]},"timestamp":"2026-08-27T07:52:22.614Z"}