{"success":true,"data":{"block":{"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/293082/8ieqwud2y2uz91buoxj3uzb45enf/cleanshot-2026-03-03-at-13-05-35.png","mobile":"https://cdn.ing/assets/i/r/293081/491xz1v2xe8p4ty1wnj7o0ijwp40/cleanshot-2026-03-03-at-13-05-53.png"},"componentPath":"blocks/article/article-sidebar-sticky.tsx","code":"import { ArticleSidebarSticky } from \"@opensite/ui/blocks/article/article-sidebar-sticky\";\nimport {\n  imagePlaceholders,\n  LONG_FORM_MARKDOWN_STRING,\n  optixFlowApiKey,\n} from \"@/lib/media\";\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={imagePlaceholders[2]}\n      authorHref=\"#\"\n      publishDate=\"January 18, 2026\"\n      heroImageSrc={imagePlaceholders[56]}\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},"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":false},"authorName":{"type":"string","description":"Author name","required":false},"authorImage":{"type":"string","description":"Author image URL","required":false},"authorHref":{"type":"string","description":"Author profile href","required":false},"publishDate":{"type":"object","description":"Publish date string","typeLabel":"React.ReactNode","required":false},"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":false},"heroImageAlt":{"type":"string","description":"Hero image alt text","required":false},"heroMediaSlot":{"type":"object","description":"Custom slot for hero media (overrides heroImageSrc)","typeLabel":"React.ReactNode","required":false},"markdownString":{"type":"string","description":"Markdown string to render","required":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["article","blog-post","sidebar","sticky","author","navigation","prose","two-column","documentation"],"performance":{},"importantUsageNotes":"ONLY use a valid markdown string for the content, supplied to the `markdownString` prop. Ensure to only use the authorName, authorImage, authorHref, and authorImage fields if you have actual data to populate those fields, using empty/fake data is not acceptable!"}},"timestamp":"2026-05-13T10:41:15.726Z"}