docs: new ai reviewer page - #345
Conversation
![redocly[bot]](https://avatars.githubusercontent.com/in/348054?s=60&v=4){kind=small}
There was a problem hiding this comment.
marketing-site AI Review: 🟢 Completed
Reunite Agent has reviewed your changes and found 5 potential issue(s).
Note
Low Risk
This PR introduces updates to the documentation/marketing site by adding a new page and refactoring the navigation menus. The changes are primarily localized to the UI presentation and page configuration, posing a low risk to core systems.
Overview
Adds a new "AI Reviewer" page and highlights it in the main navigation dropdown under a newly introduced "Agents" category.
- Bumps
@redocly/marketing-pagesand@redocly/realmdependencies. - Refactors
ProductsMenuandNavbarItemcomponents to dynamically parse and group navigation items based on configuration separators (e.g., Products, Open Source, Agents) rather than relying on hardcoded array indices. - Introduces a
<NewTag>badge component to visually highlight the new "Reviewer" tool in the navigation. - Adds the necessary SVG icon and CSS variables to support the new reviewer hover styles and UI tags.
| margin-top: 8px; | ||
| padding-top: 8px; | ||
| border-top: 1px solid var(--dropdown-list-border-color); | ||
| `; |
There was a problem hiding this comment.
AiToolsSection is defined as a div but directly contains DropdownListItem components, which are li elements. To ensure valid HTML and maintain accessibility, AiToolsSection should be defined as a ul (e.g., styled.ul) with reset list-styles.
9f8478c to
4f4f3b7
Compare
| 'API reference and mock server', | ||
| 'Internal service catalog', | ||
| 'API monitoring', | ||
| 'Reads pull requests, leaves expert feedback', |
There was a problem hiding this comment.
The hardcoded descriptions loop incorrectly assigns the Reviewer description to the Open Source separator. Additionally, getProducts and getOpenSourceTools assume exactly two separators, causing Open Source items to render under Products and Reviewer under Open Source.
| - separator: Agents | ||
| - label: Reviewer | ||
| page: ./pages/ai-reviewer/ai-reviewer.page.tsx | ||
| icon: ./images/icons/ai-reviewer.svg |
There was a problem hiding this comment.
The 'Agents' separator and 'Reviewer' item added here will not be visible in the mobile drilldown menu because ProductsMenu.tsx currently only extracts and renders the 'Products' and 'Open Source' sections.
| const openSourceTools = getOpenSourceTools(items); | ||
|
|
||
| const products = getSectionItems(items, 'Products'); | ||
| const openSourceTools = getSectionItems(items, 'Open Source'); |
There was a problem hiding this comment.
The getSectionItems refactoring is correct, but it isn't called for the new 'Agents' separator, leaving 'Reviewer' omitted from the mobile menu. Please fetch and render the 'Agents' section, and ensure its description is mapped correctly.
3 participants
What/Why/How?
Added new AI Reviewer page
Reference
Testing
Screenshots (optional)
<>
Check yourself
Security