Skip to content

docs: migrate code blocks to native Prism and restyle API reference pages#13299

Merged
AntonioABLima merged 35 commits into
release-1.11.0from
migrate-code-snippets-to-prism
Jun 12, 2026
Merged

docs: migrate code blocks to native Prism and restyle API reference pages#13299
AntonioABLima merged 35 commits into
release-1.11.0from
migrate-code-snippets-to-prism

Conversation

@AntonioABLima

@AntonioABLima AntonioABLima commented May 22, 2026

Copy link
Copy Markdown
Member

Summary

This PR contains three pieces of docs work: the migration of code blocks to native Prism, the API reference styling overhaul merged in from #13405, and a WCAG AA accessibility pass over both validated with the IBM Equal Access checker.

Code blocks → native Prism

  • Replace custom CodeSnippet component (@code-hike/lighter) with Docusaurus's native @theme/CodeBlock across all MDX files (current docs + versioned 1.8.0 and 1.9.0)
  • Add bash to additionalLanguages in docusaurus.config.js — this was the root cause of missing bash highlighting in Docusaurus v3 (prism-react-renderer v2 doesn't bundle bash by default)
  • Swizzle prism-include-languages.js to add custom Prism tokens: function-modern (cyan for CLI tools like uv, pip, docker), flag (cyan for --flags), and bash-plain (plain color for subcommands like install, run)
  • Remove @code-hike/mdx dependency and delete unused CodeSnippet.tsx and prismPythonImport.js
  • Improve inline code styling: darker background, 0.4em horizontal padding, no border in light mode

API docs styling (from #13405)

Comprehensive visual overhaul of the Redocusaurus API reference pages to align with the Langflow design system.

Layout & structure

  • Prevent horizontal scroll on API docs pages (overflow-x: clip on .main-wrapper)
  • Fix sidebar overlap with navbar (top: 60px on .menu-content)
  • Remove operation dividers (::after border between sections)
  • Fix Redocly badge visibility when sidebar has a solid background

Theming

  • CSS custom properties for all repeated colors (--redoc-bg-primary/secondary, --redoc-border-color, --redoc-text-*) — single source of truth
  • Dark sidebar background (#18181b) with border separator
  • Central content and right panel backgrounds aligned to dark (#111) / light (#f5f5f5)
  • Expanded response/schema panels match sidebar surface color

Components

  • HTTP method button and dropdown styled as cards with correct border radius
  • Request/Response sample cards with borders, rounded corners, and subtle shadows
  • Status code tabs match card surface colors
  • Card titles (h3) with consistent padding and border separators

Colors & brand

  • Primary color: Langflow pink (#F471B5) for active sidebar items, schema lines, code tokens
  • HTTP method badge colors: GET blue, POST green, PUT amber, DELETE red, PATCH purple
  • Light mode syntax highlighting mirroring dark mode token palette

Code quality

  • Redocusaurus pinned to 2.5.0 — DOM version noted on all structural selectors
  • !important usage justified in file header (Redoc CSS-in-JS requires it)
  • sidebar.backgroundColor: "transparent" in config hands background control to CSS

Accessibility (IBM Equal Access / WCAG AA)

Audited with the IBM Equal Access accessibility checker in both themes (npx achecker against a production build; dark theme scanned via a temporary colorMode.defaultMode flip). Violations went from 3,533 to 0 across the scanned pages (home, quickstart, component page, /api) in both themes — including Redoc-internal DOM gaps (layout tables, svg/select labels) patched via the redocA11y client module.

Tooling

  • accessibility-checker devDependency + aceconfig.js (policy IBM_Accessibility, reports in docs/a11y-results/, gitignored)

Docs site

  • Light primary pink #d11074 — passes 4.5:1 on white and on the inline-code background
  • Light Prism palette darkened per token to pass 4.5:1; dark code comments/line numbers lightened to #798197
  • TabItem swizzled to give tabpanels an accessible name
  • codeBlockA11y client module: scrollable code blocks get role="region" + unique label; non-scrollable ones lose the needless tabindex

API reference

  • redocA11y client module: role="main"/role="navigation" landmarks (fixes 1,924 aria_content_in_landmark violations), dark-theme response chip color patching (a single Redoc theme color cannot pass on both light and dark derived backgrounds), and semantic patches for Redoc DOM gaps — aria-hidden on decorative svgs, aria-label on content-type selects, role="presentation" on header-less 2-column layout tables
  • HTTP method badges and response chips darkened to pass 4.5:1 with white text
  • Light-theme overrides: accessible pink #cd1072 for links/required markers/constraint chips/schema tree lines; compliant grays for utility buttons and type labels
  • Dark-theme overrides: sample tokens, status-code tabs (outranking an upstream !important rule), oneOf variant buttons
  • Sidebar active/hover items keep method badge colors; expandable property names match non-expandable ones

Test plan

  • Run cd docs && npm install && npm start and verify bash code blocks are highlighted
  • Check light and dark theme switching on pages with code blocks
  • Verify inline code appearance in both themes
  • Confirm versioned docs (1.9.0, 1.8.0) render without errors
  • Verify dark and light theme on /api and /api/workflow pages
  • Check sidebar scroll + Redocly badge visible at bottom
  • Verify HTTP method badges render with correct colors
  • Confirm expanded response sections match surface color
  • Run npx achecker http://localhost:3000/api against a built docs site and confirm 0 violations

Summary by CodeRabbit

Release Notes

  • Style

    • Enhanced code block styling in documentation with improved visual hierarchy and theme consistency.
    • Updated syntax highlighting for better code readability across all language examples.
    • Added JetBrains Mono font for improved monospace code rendering.
  • Documentation

    • Improved code example rendering and presentation throughout API reference guides and component documentation.
    • Comprehensively restyled API reference pages with improved dark and light mode support.
    • Enhanced layout and typography across API documentation sections.
    • Improved visual styling for method buttons, panels, and status-code tabs.
  • Chores

    • Updated documentation build configuration and dependencies.

Review Change Stack

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.
Darken inline code background, increase horizontal padding to 0.4em,
fix vertical alignment, and remove border in light mode.
@coderabbitai

coderabbitai Bot commented May 22, 2026

Copy link
Copy Markdown
Contributor

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e1dc5b24-83a4-421b-920b-cca59ea1c4a2

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Walkthrough

This PR removes the Code Hike integration and custom CodeSnippet component from the documentation site, replacing them throughout with Docusaurus native CodeBlock. The infrastructure changes include removing the @code-hike/mdx dependency, updating Docusaurus configuration with new Prism neon themes and language extensions, and refactoring CSS for the new theming model. All MDX documentation files across main, versioned, and component docs are updated consistently.

Changes

Documentation Migration to Docusaurus CodeBlock

Layer / File(s) Summary
Component removal and infrastructure updates
docs/src/components/CodeSnippet.tsx, docs/package.json, docs/docusaurus.config.js, docs/src/theme/prism-include-languages.js
Removes custom CodeSnippet React component and @code-hike/mdx dependency. Updates Docusaurus config to replace Code Hike integration with new Prism neon themes and additional language support. Adds Prism customization hook to extend language grammars for Python, Bash, and Batch highlighting.
CSS styling for new Prism themes
docs/css/tokens.css, docs/css/custom.css, docs/css/code.css
Adds CSS variables for monospace fonts and code block theming with light/dark mode support. Imports JetBrains Mono font. Removes Code Hike-specific scroll styles and adjusts theme-code-block container styling with updated borders, padding, and line heights.
API Reference documentation migration
docs/docs/API-Reference/*, docs/versioned_docs/version-1.9.0/API-Reference/*
Replaces CodeSnippet components with @theme/CodeBlock across all API endpoint documentation (build, files, flows, logs, monitor, OpenAI responses, projects, users, workflows). Updates imports and renders language-specific examples with explicit language attributes.
Component documentation migration
docs/docs/Components/concepts-components.mdx, docs/versioned_docs/version-*.*/Components/*
Updates RecursiveCharacterTextSplitter code examples to use CodeBlock instead of CodeSnippet, removing explicit startLine/endLine configuration in favor of CodeBlock's line-number rendering.
Documentation guidance update
docs/README.md
Replaces the CodeSnippet/startLine+endLine example with a new raw-loader + CodeBlock pattern, demonstrating the updated approach for embedding repository source code in documentation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested labels

documentation, lgtm

Suggested reviewers

  • Cristhianzl
  • viktoravelino
  • keval718
🚥 Pre-merge checks | ✅ 7 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Test Quality And Coverage ⚠️ Warning No unit/integration tests for prism functionality. No CSS linting in CI. Unresolved review issues: stylelint violations, MDX duplication, missing theme-switching tests. Add unit tests for prism-include-languages.js, enable CSS linting, fix stylelint violations, resolve MDX content duplication, add code block rendering tests.
✅ Passed checks (7 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Test Coverage For New Implementations ✅ Passed This is a documentation migration PR. The docs folder has no test structure, and new code (prism-include-languages.js) is a build-time hook covered by manual testing per PR objectives.
Test File Naming And Structure ✅ Passed PR contains no test files, making the test file structure check inapplicable. This is a documentation migration PR with 0 new/modified test files.
Excessive Mock Usage Warning ✅ Passed This PR contains no test files. It exclusively modifies documentation (MDX), CSS, configuration, and removes a component. The custom check for excessive mock usage in tests is not applicable.
Title check ✅ Passed The title accurately describes the primary objective of this pull request: migrating code blocks from the custom CodeSnippet component to native Prism and restyling related CSS. This is the main change across the changeset.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch migrate-code-snippets-to-prism

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions Bot added the documentation Improvements or additions to documentation label May 22, 2026
@github-actions

github-actions Bot commented May 22, 2026

Copy link
Copy Markdown
Contributor

✅ Test Coverage Advisor

No source changes detected without accompanying tests. Thanks for keeping coverage up! 🎉

Advisory check only — never blocks merge.

@github-actions github-actions Bot added documentation Improvements or additions to documentation and removed documentation Improvements or additions to documentation labels May 22, 2026
@github-actions

This comment has been minimized.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/css/custom.css`:
- Line 1: Replace the `@import` url(...) usage in the docs/css/custom.css top line
with string notation to satisfy the Stylelint import-notation rule: update the
`@import` statement that references the Google Fonts URL (the existing `@import`
line) to use a plain quoted string form instead of url(...), so the external
font import is written as a string-based `@import`.

In `@docs/css/tokens.css`:
- Around line 9-12: The CSS custom properties --ifm-font-family-base and
--ifm-font-family-monospace contain unquoted font names that trigger the
stylelint value-keyword-case rule; wrap any non-generic or multi-word font
family names (e.g., Geist, JetBrains Mono, Geist Mono, SFMono-Regular, Apple
Color Emoji, Segoe UI emoji) in double quotes while leaving generic family
keywords (sans-serif, monospace, etc.) unquoted so the font-family stacks comply
with the linter.

In `@docs/docs/Components/concepts-components.mdx`:
- Around line 171-176: The two CodeBlock tags both reference the same
placeholder {RecursiveCharacterSource}, causing duplicate content; update the
documentation to render targeted excerpts instead—replace the first CodeBlock's
placeholder with an inputs-specific snippet (e.g., {RecursiveCharacterInputs} or
a source-range that selects constructor/parameters) and replace the second
CodeBlock's placeholder with a methods-specific snippet (e.g.,
{RecursiveCharacterMethods} or a source-range that selects class methods like
RecursiveCharacterTextSplitter.split/recursive_split) so the “inputs” block
shows only input/constructor-related lines and the “methods” block shows only
the method implementations.

In `@docs/versioned_docs/version-1.8.0/Components/concepts-components.mdx`:
- Around line 171-176: The two CodeBlock instances both reference the same
placeholder {RecursiveCharacterSource}, so both render the full source; change
the second CodeBlock to reference a sliced/filtered snippet that shows only the
methods (e.g. replace {RecursiveCharacterSource} with a distinct snippet token
like {RecursiveCharacterMethods} or use the MDX CodeBlock's slicing/properties
to select only the methods in recursive_character.py), and ensure the first
remains the inputs snippet (e.g. {RecursiveCharacterInputs}) so readers see the
focused sections for RecursiveCharacterTextSplitter (class/function names:
RecursiveCharacterTextSplitter and RecursiveCharacterSource).

In `@docs/versioned_docs/version-1.9.0/Components/concepts-components.mdx`:
- Around line 171-176: The two CodeBlock usages both insert the full
{RecursiveCharacterSource} which makes the "inputs" vs "methods" titles
inaccurate; update the docs by either slicing the source so the first CodeBlock
shows only the input excerpt and the second shows only the method excerpt from
recursive_character.py, or change the titles to reflect that both blocks render
the same {RecursiveCharacterSource} (merge into one block or retitle both as the
same excerpt). Locate the CodeBlock entries that reference
{RecursiveCharacterSource} and modify them to reference the correct sliced
source snippets or unified title so the labels match the rendered content for
RecursiveCharacterTextSplitter.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f2567e51-e378-4864-a28c-f55d942c90be

📥 Commits

Reviewing files that changed from the base of the PR and between dce4d46 and 468ba71.

⛔ Files ignored due to path filters (1)
  • docs/package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (33)
  • docs/README.md
  • docs/css/code.css
  • docs/css/custom.css
  • docs/css/tokens.css
  • docs/docs/API-Reference/api-build.mdx
  • docs/docs/API-Reference/api-files.mdx
  • docs/docs/API-Reference/api-flows-run.mdx
  • docs/docs/API-Reference/api-flows.mdx
  • docs/docs/API-Reference/api-logs.mdx
  • docs/docs/API-Reference/api-monitor.mdx
  • docs/docs/API-Reference/api-openai-responses.mdx
  • docs/docs/API-Reference/api-projects.mdx
  • docs/docs/API-Reference/api-reference-api-examples.mdx
  • docs/docs/API-Reference/api-users.mdx
  • docs/docs/API-Reference/workflows-api.mdx
  • docs/docs/Components/concepts-components.mdx
  • docs/docusaurus.config.js
  • docs/package.json
  • docs/src/components/CodeSnippet.tsx
  • docs/src/theme/prism-include-languages.js
  • docs/versioned_docs/version-1.8.0/Components/concepts-components.mdx
  • docs/versioned_docs/version-1.9.0/API-Reference/api-build.mdx
  • docs/versioned_docs/version-1.9.0/API-Reference/api-files.mdx
  • docs/versioned_docs/version-1.9.0/API-Reference/api-flows-run.mdx
  • docs/versioned_docs/version-1.9.0/API-Reference/api-flows.mdx
  • docs/versioned_docs/version-1.9.0/API-Reference/api-logs.mdx
  • docs/versioned_docs/version-1.9.0/API-Reference/api-monitor.mdx
  • docs/versioned_docs/version-1.9.0/API-Reference/api-openai-responses.mdx
  • docs/versioned_docs/version-1.9.0/API-Reference/api-projects.mdx
  • docs/versioned_docs/version-1.9.0/API-Reference/api-reference-api-examples.mdx
  • docs/versioned_docs/version-1.9.0/API-Reference/api-users.mdx
  • docs/versioned_docs/version-1.9.0/API-Reference/workflows-api.mdx
  • docs/versioned_docs/version-1.9.0/Components/concepts-components.mdx
💤 Files with no reviewable changes (2)
  • docs/src/components/CodeSnippet.tsx
  • docs/package.json

Comment thread docs/css/custom.css
@@ -1,3 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap");

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Use configured import notation for external font import.

Line 1 violates the Stylelint import-notation rule; use string notation to avoid lint failure.

Proposed fix
-@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap");
+@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap";
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap");
`@import` "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap";
🧰 Tools
🪛 Stylelint (17.11.1)

[error] 1-1: Expected "url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap")" to be ""https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap"" (import-notation)

(import-notation)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/css/custom.css` at line 1, Replace the `@import` url(...) usage in the
docs/css/custom.css top line with string notation to satisfy the Stylelint
import-notation rule: update the `@import` statement that references the Google
Fonts URL (the existing `@import` line) to use a plain quoted string form instead
of url(...), so the external font import is written as a string-based `@import`.

Comment thread docs/css/tokens.css
Comment on lines 9 to +12
--ifm-font-family-base: "Geist", Inter, -apple-system, BlinkMacSystemFont,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji";
--ifm-font-family-monospace: "Geist Mono", "SFMono-Regular", "Roboto Mono",
Consolas, "Liberation Mono", Menlo, Courier, monospace;
--ifm-font-family-monospace: "JetBrains Mono", "Geist Mono", "SFMono-Regular",
Consolas, "Liberation Mono", Menlo, monospace;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Fix stylelint value-keyword-case failures in font-family stacks.

Line 9 through Line 12 use unquoted font names that violate the configured Stylelint rule and can fail CI.

Proposed fix
-  --ifm-font-family-base: "Geist", Inter, -apple-system, BlinkMacSystemFont,
-    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji";
+  --ifm-font-family-base: "Geist", "Inter", -apple-system, "BlinkMacSystemFont",
+    "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI emoji";
-  --ifm-font-family-monospace: "JetBrains Mono", "Geist Mono", "SFMono-Regular",
-    Consolas, "Liberation Mono", Menlo, monospace;
+  --ifm-font-family-monospace: "JetBrains Mono", "Geist Mono", "SFMono-Regular",
+    "Consolas", "Liberation Mono", "Menlo", monospace;
🧰 Tools
🪛 Stylelint (17.11.1)

[error] 9-9: Expected "Inter" to be "inter" (value-keyword-case)

(value-keyword-case)


[error] 9-9: Expected "BlinkMacSystemFont" to be "blinkmacsystemfont" (value-keyword-case)

(value-keyword-case)


[error] 10-10: Expected "Helvetica" to be "helvetica" (value-keyword-case)

(value-keyword-case)


[error] 10-10: Expected "Arial" to be "arial" (value-keyword-case)

(value-keyword-case)


[error] 12-12: Expected "Consolas" to be "consolas" (value-keyword-case)

(value-keyword-case)


[error] 12-12: Expected "Menlo" to be "menlo" (value-keyword-case)

(value-keyword-case)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/css/tokens.css` around lines 9 - 12, The CSS custom properties
--ifm-font-family-base and --ifm-font-family-monospace contain unquoted font
names that trigger the stylelint value-keyword-case rule; wrap any non-generic
or multi-word font family names (e.g., Geist, JetBrains Mono, Geist Mono,
SFMono-Regular, Apple Color Emoji, Segoe UI emoji) in double quotes while
leaving generic family keywords (sans-serif, monospace, etc.) unquoted so the
font-family stacks comply with the linter.

Comment on lines +171 to +176
<CodeBlock language="python" title="RecursiveCharacterTextSplitter inputs (from recursive_character.py)" showLineNumbers>{RecursiveCharacterSource}</CodeBlock>

Additionally, components have methods or functions that handle their functionality.
For example, the `RecursiveCharacterTextSplitter` has two methods:

<CodeSnippet
source={RecursiveCharacterSource}
startLine={45}
endLine={60}
language="python"
title="RecursiveCharacterTextSplitter methods (from recursive_character.py)"
showLineNumbers
/>
<CodeBlock language="python" title="RecursiveCharacterTextSplitter methods (from recursive_character.py)" showLineNumbers>{RecursiveCharacterSource}</CodeBlock>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Restore targeted snippets for inputs vs methods instead of rendering the same full source twice.

Both blocks currently render RecursiveCharacterSource unchanged, so the “inputs” and “methods” sections show duplicate content rather than focused excerpts.

Suggested fix
 import RecursiveCharacterSource from "!!raw-loader!`@langflow/src/lfx/src/lfx/components/langchain_utilities/recursive_character.py`";
+const recursiveCharacterLines = RecursiveCharacterSource.split("\n");
+// Keep these ranges aligned with the original sections previously shown via startLine/endLine.
+const recursiveCharacterInputsSource = recursiveCharacterLines.slice(/* inputsStart */ 0, /* inputsEnd */ 0).join("\n");
+const recursiveCharacterMethodsSource = recursiveCharacterLines.slice(/* methodsStart */ 0, /* methodsEnd */ 0).join("\n");

-<CodeBlock language="python" title="RecursiveCharacterTextSplitter inputs (from recursive_character.py)" showLineNumbers>{RecursiveCharacterSource}</CodeBlock>
+<CodeBlock language="python" title="RecursiveCharacterTextSplitter inputs (from recursive_character.py)" showLineNumbers>{recursiveCharacterInputsSource}</CodeBlock>

-<CodeBlock language="python" title="RecursiveCharacterTextSplitter methods (from recursive_character.py)" showLineNumbers>{RecursiveCharacterSource}</CodeBlock>
+<CodeBlock language="python" title="RecursiveCharacterTextSplitter methods (from recursive_character.py)" showLineNumbers>{recursiveCharacterMethodsSource}</CodeBlock>
🧰 Tools
🪛 LanguageTool

[grammar] ~171-~171: Ensure spelling is correct
Context: ...cursive_character.py)" showLineNumbers>{RecursiveCharacterSource} Additionally, components have methods or...

(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)


[grammar] ~176-~176: Ensure spelling is correct
Context: ...cursive_character.py)" showLineNumbers>{RecursiveCharacterSource} The get_data_input method retrieves th...

(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/docs/Components/concepts-components.mdx` around lines 171 - 176, The two
CodeBlock tags both reference the same placeholder {RecursiveCharacterSource},
causing duplicate content; update the documentation to render targeted excerpts
instead—replace the first CodeBlock's placeholder with an inputs-specific
snippet (e.g., {RecursiveCharacterInputs} or a source-range that selects
constructor/parameters) and replace the second CodeBlock's placeholder with a
methods-specific snippet (e.g., {RecursiveCharacterMethods} or a source-range
that selects class methods like
RecursiveCharacterTextSplitter.split/recursive_split) so the “inputs” block
shows only input/constructor-related lines and the “methods” block shows only
the method implementations.

Comment on lines +171 to +176
<CodeBlock language="python" title="RecursiveCharacterTextSplitter inputs (from recursive_character.py)">{RecursiveCharacterSource}</CodeBlock>

Additionally, components have methods or functions that handle their functionality.
For example, the `RecursiveCharacterTextSplitter` has two methods:

<CodeSnippet
source={RecursiveCharacterSource}
startLine={45}
endLine={60}
language="python"
title="RecursiveCharacterTextSplitter methods (from recursive_character.py)"
showLineNumbers
/>
<CodeBlock language="python" title="RecursiveCharacterTextSplitter methods (from recursive_character.py)">{RecursiveCharacterSource}</CodeBlock>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Both titled snippets currently render the same full source content.

The “inputs” and “methods” sections now both show RecursiveCharacterSource without slicing/filtering, so readers won’t see the intended focused sections.

💡 Suggested fix
 import RecursiveCharacterSource from "!!raw-loader!`@langflow/src/lfx/src/lfx/components/langchain_utilities/recursive_character.py`";
+const recursiveCharacterLines = RecursiveCharacterSource.split("\n");
+// Adjust slice bounds to the actual ranges for inputs and methods in recursive_character.py
+const recursiveCharacterInputsSource = recursiveCharacterLines.slice(/* start */, /* end */).join("\n");
+const recursiveCharacterMethodsSource = recursiveCharacterLines.slice(/* start */, /* end */).join("\n");

-<CodeBlock language="python" title="RecursiveCharacterTextSplitter inputs (from recursive_character.py)">{RecursiveCharacterSource}</CodeBlock>
+<CodeBlock language="python" title="RecursiveCharacterTextSplitter inputs (from recursive_character.py)">{recursiveCharacterInputsSource}</CodeBlock>

-<CodeBlock language="python" title="RecursiveCharacterTextSplitter methods (from recursive_character.py)">{RecursiveCharacterSource}</CodeBlock>
+<CodeBlock language="python" title="RecursiveCharacterTextSplitter methods (from recursive_character.py)">{recursiveCharacterMethodsSource}</CodeBlock>
🧰 Tools
🪛 LanguageTool

[grammar] ~171-~171: Ensure spelling is correct
Context: ... inputs (from recursive_character.py)">{RecursiveCharacterSource} Additionally, components have methods or...

(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)


[grammar] ~176-~176: Ensure spelling is correct
Context: ...methods (from recursive_character.py)">{RecursiveCharacterSource} The get_data_input method retrieves th...

(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/versioned_docs/version-1.8.0/Components/concepts-components.mdx` around
lines 171 - 176, The two CodeBlock instances both reference the same placeholder
{RecursiveCharacterSource}, so both render the full source; change the second
CodeBlock to reference a sliced/filtered snippet that shows only the methods
(e.g. replace {RecursiveCharacterSource} with a distinct snippet token like
{RecursiveCharacterMethods} or use the MDX CodeBlock's slicing/properties to
select only the methods in recursive_character.py), and ensure the first remains
the inputs snippet (e.g. {RecursiveCharacterInputs}) so readers see the focused
sections for RecursiveCharacterTextSplitter (class/function names:
RecursiveCharacterTextSplitter and RecursiveCharacterSource).

Comment on lines +171 to +176
<CodeBlock language="python" title="RecursiveCharacterTextSplitter inputs (from recursive_character.py)">{RecursiveCharacterSource}</CodeBlock>

Additionally, components have methods or functions that handle their functionality.
For example, the `RecursiveCharacterTextSplitter` has two methods:

<CodeSnippet
source={RecursiveCharacterSource}
startLine={45}
endLine={60}
language="python"
title="RecursiveCharacterTextSplitter methods (from recursive_character.py)"
showLineNumbers
/>
<CodeBlock language="python" title="RecursiveCharacterTextSplitter methods (from recursive_character.py)">{RecursiveCharacterSource}</CodeBlock>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

The two code samples are now misleadingly identical.

Line 171 and Line 176 both render the full RecursiveCharacterSource, but the titles imply different excerpts (“inputs” vs “methods”). This regresses doc accuracy after removing startLine/endLine. Please either slice the source per section or retitle/merge so labels match rendered content.

🧰 Tools
🪛 LanguageTool

[grammar] ~171-~171: Ensure spelling is correct
Context: ... inputs (from recursive_character.py)">{RecursiveCharacterSource} Additionally, components have methods or...

(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)


[grammar] ~176-~176: Ensure spelling is correct
Context: ...methods (from recursive_character.py)">{RecursiveCharacterSource} The get_data_input method retrieves th...

(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/versioned_docs/version-1.9.0/Components/concepts-components.mdx` around
lines 171 - 176, The two CodeBlock usages both insert the full
{RecursiveCharacterSource} which makes the "inputs" vs "methods" titles
inaccurate; update the docs by either slicing the source so the first CodeBlock
shows only the input excerpt and the second shows only the method excerpt from
recursive_character.py, or change the titles to reflect that both blocks render
the same {RecursiveCharacterSource} (merge into one block or retitle both as the
same excerpt). Locate the CodeBlock entries that reference
{RecursiveCharacterSource} and modify them to reference the correct sliced
source snippets or unified title so the labels match the rendered content for
RecursiveCharacterTextSplitter.

- 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
@github-actions github-actions Bot added documentation Improvements or additions to documentation and removed documentation Improvements or additions to documentation labels May 22, 2026
@AntonioABLima AntonioABLima changed the title docs: migrate code blocks from CodeSnippet to native Prism docs: migrate code blocks from CodeSnippet to native Prism and update code theme May 22, 2026
@github-actions

This comment has been minimized.

@github-actions github-actions Bot added documentation Improvements or additions to documentation and removed documentation Improvements or additions to documentation labels May 22, 2026
@AntonioABLima
AntonioABLima requested review from aimurphy and mendonk May 22, 2026 20:35
@github-actions github-actions Bot added documentation Improvements or additions to documentation and removed documentation Improvements or additions to documentation labels Jun 1, 2026
@github-actions

This comment has been minimized.

@github-actions github-actions Bot added documentation Improvements or additions to documentation and removed documentation Improvements or additions to documentation labels Jun 5, 2026
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.
- 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
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.
- 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
- 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.
@github-actions github-actions Bot added documentation Improvements or additions to documentation and removed documentation Improvements or additions to documentation labels Jun 5, 2026
@github-actions

This comment has been minimized.

@github-actions github-actions Bot added documentation Improvements or additions to documentation and removed documentation Improvements or additions to documentation labels Jun 8, 2026
@github-actions

This comment has been minimized.

@mendonk
mendonk changed the base branch from release-1.10.0 to release-1.11.0 June 11, 2026 15:51
@github-actions github-actions Bot added documentation Improvements or additions to documentation and removed documentation Improvements or additions to documentation labels Jun 11, 2026
@github-actions github-actions Bot added documentation Improvements or additions to documentation and removed documentation Improvements or additions to documentation labels Jun 11, 2026
@github-actions

This comment has been minimized.

@github-actions github-actions Bot added documentation Improvements or additions to documentation and removed documentation Improvements or additions to documentation labels Jun 11, 2026
@github-actions

This comment has been minimized.

@mendonk mendonk left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I moved the 1.10 API spec to this PR and updated the 1.10 docs. Should be good to go.

@github-actions github-actions Bot added the lgtm This PR has been approved by a maintainer label Jun 11, 2026
@github-actions github-actions Bot added documentation Improvements or additions to documentation and removed documentation Improvements or additions to documentation labels Jun 11, 2026
@github-actions

github-actions Bot commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

Build successful! ✅
Deploying docs draft.
Deploy successful! View draft

@AntonioABLima
AntonioABLima added this pull request to the merge queue Jun 12, 2026
Merged via the queue into release-1.11.0 with commit 415323e Jun 12, 2026
30 checks passed
@AntonioABLima
AntonioABLima deleted the migrate-code-snippets-to-prism branch June 12, 2026 14:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation lgtm This PR has been approved by a maintainer

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants