Files
langflow/docs
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
..
2026-05-11 14:40:02 +00:00
2025-02-06 17:44:46 +00:00
2023-07-18 15:08:00 -03:00
2026-03-18 20:03:49 +00:00
2026-04-23 17:49:52 -07:00
2026-04-14 02:07:01 +00:00

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:

  1. Before release, the docs in the active release branch should already be set to 1.8.x, the current version.
  2. When ready to release 1.9.x, create a branch and run npm run docs:version -- 1.9.0 to snapshot the current docs.
  3. After creating a new version, update docusaurus.config.js to 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',
    },
  },
},
  1. Test the deployment locally:
npm run build
npm run serve
  1. Create a pull request to main, and merge to create your new release.
  2. To create version 2.0.x, repeat the process: update the active release branch docs to 2.0.x when you begin working on it, then when ready to release, run npm run docs:version -- 2.0.0, update docusaurus.config.js with labels using .x notation, 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

  1. Remove the versions configuration from docusaurus.config.js.
  2. Delete the docs/versioned_docs/ and docs/versioned_sidebars/ directories.
  3. 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.