* 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>
Website
This website is built using Docusaurus 3, a modern static website generator.
Installation
$ npm install
Local Development
$ npm run start
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
Build
$ npm run build
This command generates static content into the build directory and can be served using any static contents hosting service, including npm run serve.
Import code snippets from the repo with a line range
To pull a slice of a file into the docs, source the content with raw-loader and present the code with the CodeSnippet component.
For a working example, see the Components overview.
import CodeSnippet from "@site/src/components/CodeSnippet";
import customComponent from "!!raw-loader!@langflow/src/lfx/src/lfx/custom/custom_component/custom_component.py";
<CodeSnippet
source={customComponent}
startLine={41}
endLine={74}
language="python"
title="CustomComponent metadata (from codebase)"
showLineNumbers
/>
Docusaurus Versioning
The versioning configuration is found in docusaurus.config.js.
Versioning example for release version 1.9.x on top of 1.8.x:
- Before release, the docs in the active release branch should already be set to
1.8.x, the current version. - When ready to release
1.9.x, create a branch and runnpm run docs:version -- 1.9.0to snapshot the current docs. - After creating a new version, update
docusaurus.config.jsto include the 1.9.0 release:
docs: {
lastVersion: '1.9.0',
versions: {
'1.9.0': {
label: '1.9.x',
path: '1.9.0',
},
'1.8.0': {
label: '1.8.x',
path: '1.8.0',
},
},
},
- Test the deployment locally:
npm run build
npm run serve
- Create a pull request to main, and merge to create your new release.
- To create version 2.0.x, repeat the process: update the active release branch docs to
2.0.xwhen you begin working on it, then when ready to release, runnpm run docs:version -- 2.0.0, updatedocusaurus.config.jswith labels using.xnotation, and merge to main.
lastVersion= the most recent released version (shown as "latest" in the UI).
See the Docusaurus docs for more info.
Disable versioning
- Remove the versions configuration from
docusaurus.config.js. - Delete the
docs/versioned_docs/anddocs/versioned_sidebars/directories. - Delete
docs/versions.json.
References
Deployment
Using SSH:
$ USE_SSH=true npm run deploy
Not using SSH:
$ GIT_USER=<Your GitHub username> npm run deploy
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the gh-pages branch.