{"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/308416/fv1f2p5pc2a2hknexrljmw8o3zhc/article-sidebar-sticky-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308415/lb9wvq1zvqmugjkmfv69a4l4uljh/article-sidebar-sticky-mobile.jpg"},"componentPath":"blocks/article/article-sidebar-sticky.tsx","code":"import { ArticleSidebarSticky } from \"@opensite/ui/blocks/article/article-sidebar-sticky\";\nimport { LONG_FORM_MARKDOWN_STRING, optixFlowApiKey } from \"@/lib/media\";\n\nconst ARTICLE_IMAGE_URL =\n  \"https://toastability-production.s3.amazonaws.com/l080sx0lcx51x44dqrb8006nqf08\";\n\nexport default function Demo() {\n  return (\n    <ArticleSidebarSticky\n      backHref=\"#\"\n      backText=\"Back to Blog\"\n      title=\"Mastering React Server Components: A Deep Dive\"\n      authorName=\"Emma Thompson\"\n      authorImage={ARTICLE_IMAGE_URL}\n      authorHref=\"#\"\n      publishDate=\"January 18, 2026\"\n      heroImageSrc={ARTICLE_IMAGE_URL}\n      heroImageAlt=\"React Server Components architecture\"\n      background=\"white\"\n      pattern=\"dashedGridBasic\"\n      patternOpacity={1}\n      markdownString={LONG_FORM_MARKDOWN_STRING}\n      optixFlowConfig={{ apiKey: optixFlowApiKey as string }}\n    />\n  );\n}","propsSchema":{"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","required":false},"articleClassName":{"type":"string","description":"Additional CSS classes for the article content","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"summary":{"type":"object","description":"Optional Summary to be placed below the title","typeLabel":"React.ReactNode","required":false,"maxLength":240},"summaryClassName":{"type":"string","description":"Additional CSS classes for the summary","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author info","required":false},"heroImageClassName":{"type":"string","description":"Additional CSS classes for the hero image","required":false},"backLinkClassName":{"type":"string","description":"Additional CSS classes for the back link","required":false},"backHref":{"type":"string","description":"Back link href","required":false},"backText":{"type":"object","description":"Back link text","typeLabel":"React.ReactNode","required":false},"backIcon":{"type":"object","description":"Back link icon (defaults to chevron-left)","typeLabel":"React.ReactNode","required":false},"backLinkSlot":{"type":"object","description":"Custom slot for back link (overrides backHref, backText, backIcon)","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Article title","typeLabel":"React.ReactNode","required":true,"maxLength":90},"authorName":{"type":"string","description":"Author name","required":true,"maxLength":80},"authorImage":{"type":"string","description":"Author image URL","required":false,"mediaHints":{"path":"authorImage","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Author avatar or portrait image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"authorHref":{"type":"string","description":"Author profile href","required":false},"publishDate":{"type":"object","description":"Publish date string","typeLabel":"React.ReactNode","required":true,"maxLength":40},"authorSlot":{"type":"object","description":"Custom slot for author info (overrides author props)","typeLabel":"React.ReactNode","required":false},"heroImageSrc":{"type":"string","description":"Hero image source URL","required":true,"mediaHints":{"path":"heroImageSrc","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"xlarge","required":true,"preferredAspect":"16:9","note":"Primary article hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"heroImageAlt":{"type":"string","description":"Hero image alt text","required":true,"maxLength":140},"heroMediaSlot":{"type":"object","description":"Custom slot for hero media (overrides heroImageSrc)","typeLabel":"React.ReactNode","required":false},"markdownString":{"type":"string","description":"Markdown string to render","required":true,"maxLength":12000},"markdownStyles":{"type":"object","description":"Custom className mappings for markdown elements","typeLabel":"MarkdownStylesMap","required":false},"sidebarContent":{"type":"object","description":"Sidebar content","typeLabel":"React.ReactNode","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"backHref":"#","backText":"Back to Blog","title":"Mastering React Server Components","authorName":"Emma Thompson","authorImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","authorHref":"#","publishDate":"January 18, 2026","heroImageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","heroImageAlt":"React Server Components architecture","markdownString":"## Overview\nModern article layouts need clear hierarchy, source-backed metadata, and media that supports the story.\n\n## Implementation\nUse concise section headings that map to the navigation items and keep body copy grounded in the article source.\n\n## Conclusion\nClose with a practical takeaway and one clear next action for readers."},"dependencies":["@opensite/ui"],"tags":["article","blog-post","sidebar","sticky","author","navigation","prose","two-column","documentation"],"performance":{},"importantUsageNotes":"Use for long-form articles where a sticky sidebar with back navigation and author attribution should remain visible. heroImageSrc and authorImage must be absolute image URLs only. Do not use placeholder media variables, relative /images paths, logos, favicons, or video URLs. Keep title, authorName, publishDate, and markdownString grounded in the source article.","usageRequirements":{"requiredProps":["title","authorName","publishDate","heroImageSrc","heroImageAlt","markdownString"],"propConstraints":{"title":{"required":true,"maxLength":90},"summary":{"required":false,"maxLength":240,"note":"Optional article summary displayed near the title."},"authorName":{"required":true,"maxLength":80,"note":"Must identify a real article author or organization byline."},"publishDate":{"required":true,"maxLength":40,"note":"Human-readable publication date from the source post."},"heroImageSrc":{"required":true,"note":"Absolute article hero image URL. IMAGE MEDIA ONLY."},"heroImageAlt":{"required":true,"maxLength":140},"authorImage":{"required":false,"note":"Absolute author/profile image URL. IMAGE MEDIA ONLY."},"markdownString":{"required":true,"maxLength":12000,"note":"Long-form markdown article body."}},"mediaSlots":{"heroImageSrc":{"path":"heroImageSrc","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"xlarge","required":true,"preferredAspect":"16:9","note":"Primary article hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"authorImage":{"path":"authorImage","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Author avatar or portrait image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["blog_posts","team_members","media_library"],"notes":["Article titles, authors, dates, summaries, chapter names, and body copy must come from source-backed article or blog data. Do not invent bylines or publication metadata.","All article media values must be absolute URLs to real image assets. Do not use relative paths, placeholder media variables, logos, favicons, or video URLs in image props."]}}},"timestamp":"2026-06-27T20:01:34.909Z"}