Docs page update

[carlosabadia]

No description provided.

[greptile-apps]

Greptile Summary

Comprehensive docs page UI refresh that adds dark mode support, updates typography to standard Tailwind classes, redesigns the sidebar and right-sidebar TOC, replaces some rx.link with rx.el.a, and adjusts layout spacing/positioning across the documentation site.

• Sidebar redesign: Replaced custom font classes with Tailwind utilities, added dark mode color tokens (text-m-slate-*, dark:*), swapped rx.accordion.icon for ui.icon("ArrowDown01Icon"), and improved scroll-to-active JS to use container-relative scrolling instead of scrollIntoView.
• Typography & headings: Migrated from custom font classes (font-x-large, font-large, etc.) to standard Tailwind text sizes (text-5xl, text-3xl, etc.) with font-[525] weight. Text body color updated to text-m-slate-8 dark:text-m-slate-6.
• Right sidebar TOC: Switched from rx.link/rx.list_item to rx.el.a/rx.el.li for unstyled elements. Refactored JS highlight logic into setDefaultState/setActiveState helpers with multi-class support for dark mode.
• Layout adjustments: Sidebar container changed from max-w-[300px] to w-[19.5rem] with sticky positioning and border. Navbar padding breakpoint changed from lg: to 2xl:. Product card CTA pinned to bottom with mt-auto.
• Potential issue: Breadcrumb lg:mt values when the hosting banner is visible vs. hidden appear inverted — the banner-visible margin (139px) is smaller than the no-banner margin (145px), which is the opposite of the old behavior and inconsistent with how the sidebar handles the same condition.

Confidence Score: 3/5

• Mostly safe styling changes, but the breadcrumb margin-top logic for the banner state appears inverted on large screens and should be verified before merging.
• The PR is primarily a visual/styling overhaul with no backend logic changes. Most changes are straightforward Tailwind class updates for dark mode support. However, the breadcrumb margin-top values when the hosting banner is visible vs hidden appear logically inverted on large screens (139px with banner vs 145px without), which would cause layout misalignment. There are also minor issues with underline="none" being used on rx.el.a elements where it's not a valid prop.
• pcweb/templates/docpage/docpage.py — breadcrumb margin-top logic for banner visibility appears inverted on large screens; pcweb/components/docpage/sidebar/sidebar.py — large file with extensive changes, double-space typos in multiple class_name strings

Important Files Changed

Filename	Overview
pcweb/templates/docpage/docpage.py	Major styling overhaul of doc page layout. Breadcrumb margin-top values when banner is visible/not visible appear inverted on large screens. Multiple rx.link → rx.el.a migrations retain underline="none" prop that isn't valid on bare HTML anchors. Right sidebar TOC refactored to use dark mode classes and box-shadow borders.
pcweb/components/docpage/sidebar/sidebar.py	Extensive sidebar redesign: new dark mode support, replaced rx.accordion.icon with ui.icon, improved scroll-to-active logic, updated spacing/colors. Multiple double-space typos in class_name strings. Uses ui.cn for conditional classes.
pcweb/templates/docpage/blocks/headings.py	Heading components updated from custom font classes to standard Tailwind text sizes and font-[525]. Scroll margin updated to pixel values for banner/no-banner states. Dark mode support added via text-m-slate-12 dark:text-m-slate-3.
pcweb/templates/docpage/blocks/typography.py	Text and list components updated from text-slate-12 to new dark mode-aware color tokens (text-m-slate-8 dark:text-m-slate-6). Font weight changed from font-normal to font-[475].
pcweb/flexdown.py	Extended markdown_with_shiki component map to include heading, text, list, link, and image components (previously only had pre). Now matches the component_map defined earlier in the file.
pcweb/views/docs_navbar.py	Navbar horizontal padding breakpoint changed from lg:px-16 to 2xl:px-16. Background gradient syntax updated to use Tailwind dark mode classes instead of light-dark() CSS function.
pcweb/pages/landing/views/products.py	Minor layout fix: added mt-auto shrink-0 to product card CTA link to push it to the bottom of the card, preventing uneven card heights.
pcweb/components/docpage/navbar/buttons/sidebar.py	Minor 3px adjustment to mobile sidebar drawer top position (74px → 77px) to match updated navbar height.

Flowchart

flowchart TD
    A[docs_navbar] --> B[docpage layout]
    B --> C[sidebar container]
    B --> D[content area]
    B --> E[right sidebar TOC]

    C --> C1["sidebar_comp\n- sidebar_category\n- create_sidebar_section\n- sidebar_item_comp"]
    C --> C2["Scrollable_SideBar JS\n- scrollToActiveSidebarLink\n- container-relative scroll"]

    D --> D1["breadcrumb\n- rx.el.a links\n- banner-aware mt"]
    D --> D2["article content\n- heading components h1-h4\n- text_comp / list_comp\n- markdown_with_shiki"]

    E --> E1["TOC navigation\n- rx.el.a links\n- right_sidebar_item_highlight JS\n- setDefaultState / setActiveState"]

    style C fill:#e8f4f8,stroke:#333
    style D fill:#f0f8e8,stroke:#333
    style E fill:#f8e8f4,stroke:#333

Loading

_{Last reviewed commit: ed4baab}

[greptile-apps]

_{8 files reviewed, 4 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (1)

pcweb/templates/docpage/docpage.py
underline="none" is not a valid prop for rx.el.a

underline is a Radix theme prop available on rx.link, but rx.el.a is a plain HTML anchor element that doesn't support it. This prop will be passed through as an unrecognized HTML attribute (<a underline="none">). If you need to remove the underline, use class_name="no-underline" or text-decoration-none via Tailwind instead.

            rx.el.a(
                to_title_case(to_snake_case(segment), sep=" "),
                class_name="min-h-8 flex items-center text-sm font-[525] text-m-slate-12 dark:text-m-slate-3 last:text-m-slate-7 dark:last:text-m-slate-6 hover:text-primary-10 dark:hover:text-primary-9 no-underline"
                + (" truncate" if i == len(segments) - 1 else ""),
                href=current_path,
            )