2 Commits

Author	SHA1	Message	Date
Antônio Alexandre Borges Lima	415323ec6d	docs: migrate code blocks to native Prism and restyle API reference pages (#13299) ... * docs: migrate code blocks from CodeSnippet to native Prism Replace the custom CodeSnippet component (@code-hike/lighter) with Docusaurus's native @theme/CodeBlock across all MDX files (current and versioned docs). Add bash to additionalLanguages and swizzle prism-include-languages.js to add custom token highlighting for shell commands and flags. Remove @code-hike/mdx dependency. * docs: improve inline code styling Darken inline code background, increase horizontal padding to 0.4em, fix vertical alignment, and remove border in light mode. * docs: address PR review — fix code slice regression and CSS/regex polish - Inline RecursiveCharacterTextSplitter inputs and methods as literal code blocks in concepts-components.mdx (current + 1.8.0 + 1.9.0), restoring the focused slices lost when migrating from CodeSnippet - Scope bash-plain Prism regex to unambiguous CLI subcommands only, removing generic bash builtins (run, add, get, set, start, stop, etc.) - Merge duplicate .theme-code-block CSS rules into a single declaration * fix(docs): prevent horizontal scroll on API docs pages The Redoc two-column layout (sidebar 300px + api-content 1300px) totals 1600px, expanding .main-wrapper beyond narrower viewports because it has overflow:visible. Clips at .main-wrapper using the html.plugin-redoc class that Docusaurus adds on API pages only. * fix(docs): API docs sidebar and layout fixes - Disable Redoc built-in search (disableSearch: true) - Pin sidebar top to navbar height (top: 60px) so it never hides behind navbar - Remove hardcoded #111 background from dark mode sidebar * fix(docs): render markdown correctly in API docs descriptions The _clean_descriptions function was converting newlines to <br> tags, mixing HTML with Markdown. CommonMark stops parsing Markdown headings (###) inside HTML blocks, causing them to appear as literal text in Redoc. Replace the <br> conversion with a simple strip() so descriptions remain pure Markdown and Redoc renders headings, lists, and code blocks correctly. * feat(docs): align API docs colors with Langflow brand - Set primaryColor to #F471B5 (Langflow pink) - Add HTTP method badge colors matching Langflow palette - Set schema.linesColor and requireLabelColor to brand pink - Set inline code color to pink, headers to #e3e3e3 - Set sidebar background to #18181b (matches frontend dark bg) - Set rightPanel background to #0d0d0f, codeBlock to #161618 - Refactor: move color config from CSS to theme.theme where safe - Remove dead search input CSS (search disabled via disableSearch:true) - Consolidate duplicate .menu-content rules * wip(docs): API docs styling — colors, components, light/dark themes * fix(docs): fix Response samples h3 title padding and refactor HTTP method button CSS * feat(docs): add sidebar dark background, active item styles, and right panel color adjustments * fix(docs): add sidebar borders and remove operation divider border * fix(docs): fix expanded response background and align dark/light theme colors * refactor(docs): standardize selectors, comments and remove duplicate rules in redocusaurus.css * refactor(docs): apply PR review — CSS custom properties, version pin, dom version comments, fix overflow * fix(docs): fix Redocly badge visibility covered by sidebar background * fix(docs): extend sidebar border-right to Redocly badge area * refactor(docs): replace hardcoded #ffffff label color with --redoc-text-label variable * fix(docs): lighten inline code background in API docs dark theme Redoc's default typography.code.backgroundColor (rgba(38, 50, 56, 0.05)) is nearly invisible over the dark background. Override it with rgba(255, 255, 255, 0.05) in dark theme only, excluding pre > code so code sample blocks stay unaffected. * feat(docs): align docs primary pink with API spec brand color Use #f471b5 (API spec primaryColor) as --ifm-color-primary in dark theme and #e44fa0 (slightly darkened for contrast on white) in light theme. Remove dark-theme pink overrides in sidebar.css (#ff6ad0 CTA and hsla(329, 55%, 68%) active TOC link) — they compensated for the old muted pink and are redundant now that the primary itself is bright. * feat(docs): lighten dark theme text colors for better readability Bump body text (#a8a8b0 -> #bcbcc4), headings (#cdcdd4 -> #dcdce2) and sidebar menu (#8a8a92 -> #9c9ca4) one step brighter. * chore(docs): add IBM Equal Access accessibility-checker setup Add accessibility-checker as devDependency with aceconfig.js (policy IBM_Accessibility, JSON reports in docs/a11y-results/, gitignored). Scan with: npx achecker <url> against a built docs site. * fix(docs): WCAG AA contrast and ARIA fixes across docs and API reference Validated with IBM Equal Access scans (light theme): home, quickstart and component pages at 0 violations; /api from 3382 down to 167 (all remaining are Redoc-internal DOM: schema table headers, svg/select labels). Docs site: - Light primary pink #d11074 — passes 4.5:1 on white and inline-code bg - Light Prism palette darkened per-token to pass 4.5:1 on #f9f9fd - TabItem swizzled to give tabpanels an accessible name (aria-label) - codeBlockA11y client module: scrollable code blocks get role=region + unique label; non-scrollable ones lose the needless tabindex API reference (Redocusaurus): - redocA11y client module: role=main on api-content, role=navigation on sidebar — fixes 1924 aria_content_in_landmark violations - HTTP method badges and response chips darkened to pass with white text - Light-theme overrides: accessible pink #cd1072 for links, required markers, constraint chips, schema tree lines; darker grays for utility buttons and type labels (incl. 0.7-opacity wrapper fix) - Sidebar active/hover items use regular text color, method badges keep their own colors; expandable property names match non-expandable ones * fix(docs): WCAG AA contrast fixes for dark theme Validated with IBM Equal Access scans in dark mode (temporary colorMode.defaultMode flip during scanning): home, quickstart and component pages at 0 violations; /api matches light at 167 remaining (all Redoc-internal DOM: table headers, svg/select labels). - Code block comments/line numbers #4a5060 -> #798197 (4.56:1 on #18181a) - Redoc dark sample tokens: boolean/null #e95c59, number #5392b8 - Status-code tabs: lift docusaurus-theme-redoc's #303846 !important selected-tab rule with a higher-specificity override - oneOf variant buttons: dark text in both themes (their white/pink backgrounds are theme-independent) - redocA11y client module: patch response chip colors (success green / error red) to dark-accessible variants when data-theme=dark — a single Redoc theme color cannot pass on both light and dark derived backgrounds, and status is only distinguishable by computed color * fix(docs): resolve remaining Redoc-internal accessibility violations Extend the redocA11y client module with semantic patches for Redoc DOM the theme cannot reach (validated: 0 IBM Equal Access violations on all scanned pages in both light and dark themes): - Decorative svg chevrons/arrows: aria-hidden=true (svg_graphics_labelled) - Content-type dropdowns: aria-label (input_label_exists) - Schema field tables (2-col name|description layout, no <th> anywhere): role=presentation — content reads in DOM order; role=rowheader on <td> is invalid ARIA inside a native table (table_headers_exists/related) - Semantic patches run on the next animation frame after DOM changes so Redoc's lazy-rendered operations are covered immediately; the heavier color patch stays debounced * ci(docs): gate docs accessibility with IBM Equal Access scans Add test-docs-accessibility job to docs_test.yml (rides the existing docs/** path filter from ci.yml): build + scan 4 representative pages (home, quickstart, component page, /api) in light theme, then flip colorMode.defaultMode to dark, rebuild and scan again. - scripts/a11y-ci.sh: serves the build and runs npx achecker per page with one retry to absorb Redoc lazy-render timing flakes; any real violation fails the job (failLevels: violation) - aceconfig.js: pin ruleArchive to 19May2026 so IBM rule updates don't break CI without a deliberate bump * ci(docs): fix Chrome sandbox launch on Ubuntu 24.04 runners Ubuntu 24.04 restricts unprivileged user namespaces via AppArmor, which prevents puppeteer's Chrome (used by the IBM checker) from starting its sandbox. Re-enable them with the documented sysctl workaround instead of weakening the browser with --no-sandbox. * fix(docs): align response status code with description text Redoc sets vertical-align: top and a smaller line-height on the status code <strong> inside response buttons, leaving "200" visually higher than "Successful Response". Align both to the shared text baseline. * refactor(docs): apply PR review feedback - redocA11y: match only real Redoc routes (/api, /api/workflow) — a bare startsWith("/api") also matched docs pages like /api-request and leaked one body MutationObserver per navigation - codeBlockA11y: also observe the hidden attribute — Docusaurus tabs toggle panels via hidden (no childList mutation), so scrollable blocks inside an initially hidden tab were never re-evaluated for tabindex - Extract Prism themes to src/prismThemes.js (docusaurus.config.js was past the 600-line red flag) - concepts-components.mdx (current + 1.9.0 + 1.8.0): comment pointing hardcoded snippets to recursive_character.py to mitigate drift Validated: clean build + IBM Equal Access scans 4/4 passing. * replace-openapi-file-with-1.10 * migrate-prism-changes-to-1.10-version * a11y-script-dont-block --------- Co-authored-by: Mendon Kissling <59585235+mendonk@users.noreply.github.com>	2026-06-12 13:58:04 +00:00
Antônio Alexandre Borges Lima	bbe2ccdc91	docs: fix sidebar and TOC styles for Redocusaurus (#12748) ... * docs: improve sidebar and TOC readability + scroll progress - Fix left nav sidebar hugging the left edge (remove margin-left) - Increase sidebar font sizes and lift muted colors for legibility - TOC right-side: white inactive items, pink active, gray for passed sections - Add clientModule (tocProgress.js) to track scroll progress in TOC - Add Redocusaurus API page styles to match site theme Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: fix sidebar/TOC height stability and active item reflow - Force sidebarViewport to 100vh to prevent shrinking during scroll - Replace font-weight on active TOC item with text-shadow to avoid reflow * docs: left-anchor sidebar and increase fonts on large screens * docs: constrain prev/next nav to match content max-width * docs: fix sidebar jump on scroll by moving padding-top inside menu * docs: fix sidebar-ad spacing with transparent padding on li * docs: fix sidebarViewport height and MutationObserver leak * docs: constrain doc content to 75vw and remove dead CSS comments - Cap docMainContainer at 75vw - Set pagination-nav to 100% width to match content column - Remove commented-out .markdown and .ch-scrollycoding blocks * docs: set docMainContainer max-width to 75% for better reading width * docs: center main-wrapper on large screens and center docItemWrapper * fix: revert lodash override to stable 4.17.21 lodash 4.18.0 is a broken release — template.js uses assignWith and arrayEach without importing them, crashing npm start. Pin to 4.17.21 across all nested overrides. * fix: prevent horizontal scroll on mobile docs pages docsWrapper has flex:1 0 auto (flex-shrink:0), so it never shrinks below the natural content width (~570px on iPhone). Cap it to 100vw and add min-width:0 down the flex chain (docRoot, docMainContainer) so the layout stays within viewport on narrow screens. Also remove the overflow:visible override from ch-code-wrapper, which was defeating the code block's own horizontal containment. * feat: responsive navbar search and hide social icons on mobile Shrink search bar as viewport narrows (160px at 1100px, 100px at 996px), collapse to icon-only at 960px. Hide GitHub, X, and Discord icons below 996px where the hamburger menu takes over navigation. * fix: images always respect container width above 996px Use min(100%, 600px) so images are capped at 600px but never overflow their container when the content area is narrower (e.g. sidebar open). * fix: improve TOC progress scroll tracking and bottom-of-page detection Adds scroll handler with RAF throttle, pauses/resumes MutationObserver to avoid loops, and forces last TOC link active when scrolled to page bottom. * fix: translate Portuguese comments to English in custom.css * fix: sidebar viewport fills full screen height * feat: sidebar section icon turns pink with ease transition when active * fix: reduce TOC font size to 0.8rem * fix: remove docMainContainer right padding and add 48px gap to content col * fix: card header responsive alignment and title margin reset * fix: darken card background and active sidebar item bg on light theme * fix: revert TOC colors and add inline code border radius tweak * fix: minimal scrollbar for sidebar and TOC — thumb only on hover * fix: scrollbar fade-in/out transition at 0.25s ease * feat: add rehype plugin for table column wrapping and centering Inserts zero-width space after underscores in inline code cells so long env-var names wrap at underscore boundaries. Also centers Format/Default columns via a col-center class applied at build time. * fix: use --ifm-heading-color for sidebar group labels in both themes * refactor: split docs custom.css into themed partials Breaks the 1,658-line monolithic custom.css into 8 focused files (tokens, layout, navbar, sidebar, typography, components, code, redocusaurus). custom.css is now a thin entry point with @imports. * fix: align sidebar and navbar with shared --docs-gutter token Introduces --docs-gutter: 1rem in tokens.css and applies it to both navbar__inner horizontal padding and sidebar nav.menu padding-left, keeping the Langflow logo and sidebar items visually aligned. * fix: match sidebar ad background to page background color Dark mode uses #111 (same as sidebar bg); light mode uses --ifm-background-color. --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-12 22:11:36 +00:00