feat: DC-4631 Add new dropdown to toc section #7037
Conversation
carlagn
requested review from
Techboidesign,
aidankmcalister,
ankur-arch,
mhessdev and
petradonka
Dangerous URL checkNo absolute URLs to prisma.io/docs found. |
Redirect checkThis PR probably requires the following redirects to be added to static/_redirects:
|
Deploying docs with
|
| Latest commit: |
86bfb92
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b9ee7195.docs-51g.pages.dev |
| Branch Preview URL: | https://feat-dc-4631-dropdown-toc.docs-51g.pages.dev |
carlagn
force-pushed
the
feat/DC-4631-dropdown-toc
branch
from
3ff6b4e to
4352105
Compare
carlagn
force-pushed
the
feat/DC-4631-dropdown-toc
branch
from
4352105 to
8a9c9f1
Compare
WalkthroughThis update introduces several new React components and CSS modules, primarily enhancing the documentation site's layout, theming, and interactivity. New dropdown and table of contents (TOC) components are added with associated styles and SVG icons. Icon handling is extended to support custom icons. Theming variables and icon font classes are expanded, and minor code cleanups are performed throughout. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Dropdown
participant TOC
participant Clipboard
participant ExternalSite
User->>Dropdown: Clicks anchor or right-clicks (if enabled)
Dropdown->>Dropdown: Toggles open/close state
Dropdown->>Dropdown: Handles outside click/Escape to close
User->>TOC: Opens TOC dropdown
TOC->>Clipboard: Clicks "Copy Markdown" (fetches and copies)
TOC->>ExternalSite: Clicks "Open in Chat" (opens new tab with URL)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~18 minutes Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (11)
src/theme/DocItem/Layout/styles.module.css (1)
6-10: Consider avoiding !important if possible.While the
!importantdeclaration ensures the max-width constraint is enforced, it can make future styling harder to override. Consider if the specificity can be increased through selector chains instead.@media (min-width: 997px) { .docItemCol { - max-width: 75% !important; + max-width: 75%; } }src/components/Icon.tsx (2)
5-6: Improve type safety for thecustomiconprop.The
customiconprop is typed asany, which defeats TypeScript's type checking benefits. Consider usingReactNodeorJSX.Elementfor better type safety.interface IconProps { icon?: string; - customicon?: any; + customicon?: ReactNode; color?: string; className?: string; size?: string; btn?: "left" | "right"; fit?: "width" | "height"; }
40-56: Consider font size calculation for custom icons.The conditional rendering logic is well-implemented. However, the dynamic font size calculation (lines 24-32) and resize event handling only work for the
<i>element sinceiconRefis not attached to the<span>containing custom icons. This means custom icons will only use the providedsizeprop or default styling.If dynamic sizing is needed for custom icons, consider attaching the ref to both elements or implementing a separate sizing strategy.
src/theme/TOC/index.tsx (1)
23-23: Improve type safety for metadata prop.The
metadataprop is typed asany, which reduces type safety. Consider creating a proper interface for the metadata object based on its expected structure.+interface DocMetadata { + slug: string; + editUrl: string; + // Add other expected properties +} -export default function TOC({className, metadata, ...props}: Props & {metadata: any }): ReactNode { +export default function TOC({className, metadata, ...props}: Props & {metadata: DocMetadata }): ReactNode {src/theme/TOCItems/icons.tsx (1)
1-36: LGTM! Well-implemented SVG icon components.The SVG icon components are properly structured with:
- Appropriate dimensions and viewBox settings
currentColorusage for theme integration- Proper SVG path definitions for brand logos
The icons will integrate well with the theming system and provide consistent visual identity for the AI platform links.
Note: These appear to be brand logos for various AI platforms. Ensure compliance with each platform's brand guidelines and terms of service when using their logos.
src/components/content-dropdown/styles.module.scss (4)
1-1: Remove unused SCSS variable.The
$border-colorvariable is defined but never used in this stylesheet.-$border-color: #2d3748; -
41-48: Consider restructuring nested container selector.The nested
.containerselector inside.overlayWrappercould be confusing since.containeris also defined as a separate class. Consider using a more specific selector or restructuring..overlayWrapper { opacity: 0; pointer-events: none; @media (max-width: 599px) { position: fixed; height: 100vh; z-index: 102; width: 100vw; background: rgb(9, 10, 21, 0.75); top: 0; left: 0; } - .container { + & .container { transform: translateY(-8px); } &.showOverlay { - .container { + & .container { transform: translateY(0); } } }
37-37: Use modern rgba() syntax.Consider using the modern
rgba()syntax for better browser compatibility and readability.- background: rgb(9, 10, 21, 0.75); + background: rgba(9, 10, 21, 0.75);
90-96: Consider alternatives to !important declarations.While the
!importantdeclarations ensure proper positioning override, they can make future maintenance difficult. Consider if the specificity could be increased through other means.If these overrides are truly necessary, consider documenting why
!importantis required in a comment for future maintainers.src/components/content-dropdown/index.tsx (2)
66-66: Improve event handler typing.Consider using a more specific event type instead of
anyfor better type safety.- onClick={(e: any) => { + onClick={(e: React.MouseEvent<HTMLDivElement>) => {
72-76: Improve item mapping type safety.Consider using a more specific type for items instead of
anyto improve type safety.The current implementation works, but if the items have a known structure, consider defining a more specific interface:
type DropdownItem = React.ReactNode; // Then in the component: {items.map((item: DropdownItem, idx: number) => (
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
src/components/Icon.tsx(2 hunks)src/components/content-dropdown/index.tsx(1 hunks)src/components/content-dropdown/styles.module.scss(1 hunks)src/css/all.css(1 hunks)src/css/theming.css(4 hunks)src/theme/DocBreadcrumbs/index.tsx(1 hunks)src/theme/DocItem/Layout/index.tsx(1 hunks)src/theme/DocItem/Layout/styles.module.css(1 hunks)src/theme/DocItem/TOC/Desktop/index.tsx(1 hunks)src/theme/TOC/index.tsx(1 hunks)src/theme/TOC/styles.module.css(1 hunks)src/theme/TOCItems/icons.tsx(1 hunks)src/theme/Tabs/index.tsx(0 hunks)
💤 Files with no reviewable changes (1)
- src/theme/Tabs/index.tsx
🧰 Additional context used
🪛 Biome (2.1.2)
src/theme/TOC/index.tsx
[error] 33-33: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 34-34: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 39-39: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 44-44: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 49-49: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Check internal links
- GitHub Check: runner / linkspector
- GitHub Check: Lost Pixel
- GitHub Check: Cloudflare Pages
🔇 Additional comments (16)
src/theme/DocItem/Layout/styles.module.css (1)
1-4: CSS selector specificity looks appropriate.The selectors target specific layout scenarios effectively - removing top margin from elements following headers and first children of articles within the doc container.
src/css/all.css (1)
847-853: Icon additions follow established patterns.The new
.fa-markdownand.fa-openaiicon classes are properly implemented using the same::beforepseudo-element pattern as other icons in the file. The Unicode values are appropriate for FontAwesome icons.src/theme/TOC/styles.module.css (1)
1-10: Sticky TOC positioning implemented correctly.The sticky positioning with dynamic height calculation using CSS custom properties is well-implemented. The overflow settings appropriately handle scrollable content while maintaining horizontal visibility.
src/theme/DocBreadcrumbs/index.tsx (1)
1-1: Good cleanup of unused imports.Removing the unused
useEffectanduseStateimports is a good housekeeping practice that reduces bundle size and eliminates dead code.src/theme/DocItem/TOC/Desktop/index.tsx (1)
7-16: Component logic and structure look solid.The component properly extracts TOC data and front matter using Docusaurus hooks, and correctly passes all necessary props to the TOC component. The use of theme class names ensures consistent styling.
src/theme/DocItem/Layout/index.tsx (1)
21-40: LGTM! Well-structured TOC visibility logic.The
useDocTOChook cleanly encapsulates the logic for determining when and how to render the TOC based on front matter settings, content availability, and viewport size. The responsive handling for desktop/mobile/SSR is appropriately implemented.src/css/theming.css (1)
72-72: LGTM! Consistent theming implementation.The addition of
--disabled-font-coloris well-implemented across all theme contexts with appropriate color values for light and dark themes. The consistent definition ensures the variable is available regardless of theme configuration.src/components/content-dropdown/styles.module.scss (4)
17-27: LGTM!The anchor button styling is well-structured with proper interactive states and consistent use of CSS custom properties for theming.
56-75: LGTM!The container styling is well-structured with appropriate responsive behavior, smooth transitions, and good use of flexbox for layout.
77-88: LGTM!The item styling provides good interactive feedback with smooth transitions and proper use of CSS custom properties for theming.
97-105: LGTM!The child element styling and link color inheritance are well-implemented for the top positioning variant.
src/components/content-dropdown/index.tsx (5)
1-14: LGTM!The imports are well-organized and the TypeScript interface is properly defined with appropriate optional properties and type annotations.
15-27: LGTM!The component setup is well-structured with appropriate default values, proper state management, and good separation of concerns using custom hooks.
29-36: LGTM!The keyboard event handling is properly implemented with appropriate cleanup, providing good accessibility support for closing the dropdown with the Escape key.
56-60: LGTM!The anchor rendering is well-structured with appropriate conditional styling and proper use of Icon components for visual feedback.
61-83: LGTM!The dropdown overlay and items rendering logic is well-implemented with proper event handling, conditional rendering, and appropriate use of React patterns.
* Add new dropdown to toc section * Update hrefs on dropdown * Update icons and add T3 * Update link text Update dropdown order * revert deleted files * cleanup
Fixes #DC-4631
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Style