refactor: abstracted components and assets to @common-config#50
refactor: abstracted components and assets to @common-config#50th0rOdinson merged 4 commits intodevfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 WalkthroughWalkthroughThis change migrates several UI components (CategoryCards, HeroSection, HandbookSection, IlustrationsContainer) from site-specific implementations to a shared package ( Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Possibly related PRs
📜 Recent review detailsConfiguration used: .coderabbit.yaml ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 300000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (5)
packages/common-config/static/common/styles/global.css (1)
19-27: Nit: supply a fallback for new brand variablesThe new
--op-red*tokens are only defined inside:root, html[data-theme="dark"].
If any component references them before this selector is parsed (e.g. critical-CSS inlined in<head>), the value will beunset.You can provide a zero-cost fallback:
color: var(--op-red, #FF0420);packages/common-config/src/components/CategoryCards/styles.module.css (1)
39-43: Add CSS custom-property fallbacks for safer themingIf the component forgets to set
--gradient-start/--gradient-end, thelinear-gradientresolves toundefined→ transparent. Provide defaults:-background: linear-gradient(89.99deg, var(--gradient-start) 30%, var(--gradient-end) 100%); +background: linear-gradient( + 89.99deg, + var(--gradient-start, #1f55d5) 30%, /* default blue */ + var(--gradient-end, #e95b9b) 100% /* default pink */ +);sites/wonderland/src/css/local.css (1)
3-57: Minor CSS touch-ups for robustness
- Explicitly disable repetition for the mask to avoid browser-specific defaults.
- Consider using a CSS custom property for the mask URL so downstream themes can override without editing the file.
- mask: url("/img/elipse_background.svg") no-repeat; - -webkit-mask: url("/img/elipse_background.svg") no-repeat; + mask: url("/img/elipse_background.svg") no-repeat; + mask-repeat: no-repeat; + -webkit-mask: url("/img/elipse_background.svg") no-repeat; + -webkit-mask-repeat: no-repeat;sites/template/src/pages/index.tsx (1)
11-38: Consider updating placeholder data for production use.The template categories all use the same icon (
/img/docusaurus.png) and href (/docs/intro/welcome). This appears to be placeholder data appropriate for a template, but should be customized for actual site implementations.packages/common-config/src/components/HandbookSection/index.tsx (1)
36-81: Consider simplifying the conditional rendering logic.The conditional logic for single vs multiple handbooks adds complexity. Consider refactoring to reduce duplication and improve maintainability.
Consider extracting the handbook card rendering into a helper function:
+ const renderHandbookCard = (handbook: Handbook) => ( + <a + key={handbook.title} + href={handbook.href} + style={{ backgroundImage: `url(${handbook.bgImage})` }} + target="_blank" + className={styles.handbooksCard} + > + <img + src={handbook.image} + alt="" + className={styles.handbooksCardIcon} + /> + </a> + ); <div className={styles.handbooksCards}> - {handbooks.length === 1 ? ( - <> - {/* First handbook card */} - <a - key={handbooks[0].title} - href={handbooks[0].href} - style={{ backgroundImage: `url(${handbooks[0].bgImage})` }} - target="_blank" - className={styles.handbooksCard} - > - <img - src={handbooks[0].image} - alt="" - className={styles.handbooksCardIcon} - /> - </a> - - {/* Default handbook card (not a link) */} - <div className={styles.handbooksCardDefault}> - <img - src="/img/default-handbook.svg" - alt="" - className={styles.handbooksCardIcon} - /> - </div> - </> - ) : ( - handbooks.map((handbook) => { - return ( - <a - key={handbook.title} - href={handbook.href} - style={{ backgroundImage: `url(${handbook.bgImage})` }} - target="_blank" - className={styles.handbooksCard} - > - <img - src={handbook.image} - alt="" - className={styles.handbooksCardIcon} - /> - </a> - ); - }) - )} + {handbooks.map(renderHandbookCard)} + {handbooks.length === 1 && ( + <div className={styles.handbooksCardDefault}> + <img + src="/img/default-handbook.svg" + alt="" + className={styles.handbooksCardIcon} + /> + </div> + )} </div>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (13)
packages/common-config/static/common/img/OPlogo.svgis excluded by!**/*.svgpackages/common-config/static/common/img/azteclogo.svgis excluded by!**/*.svgpackages/common-config/static/common/img/background-handbook-card.pngis excluded by!**/*.pngpackages/common-config/static/common/img/enter-button.svgis excluded by!**/*.svgpackages/common-config/static/common/img/icons/chevron-down.svgis excluded by!**/*.svgpackages/common-config/static/common/img/icons/information-circle.svgis excluded by!**/*.svgpackages/common-config/static/common/img/red-card-bg.pngis excluded by!**/*.pngpackages/common-config/static/common/img/star-icon.svgis excluded by!**/*.svgpackages/common-config/static/common/img/violet-card-bg.pngis excluded by!**/*.pngpackages/common-config/static/common/img/wonderland-button-bg.pngis excluded by!**/*.pngpackages/common-config/static/common/img/wonderland-button-image.pngis excluded by!**/*.pngpackages/common-config/static/common/img/wonderland-op-navbar-logo.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (21)
packages/common-config/package.json(2 hunks)packages/common-config/preset/commonDocusaurusConfig.ts(1 hunks)packages/common-config/src/components/CategoryCards/index.tsx(1 hunks)packages/common-config/src/components/CategoryCards/styles.module.css(2 hunks)packages/common-config/src/components/HandbookSection/index.tsx(3 hunks)packages/common-config/src/components/HandbookSection/styles.module.css(0 hunks)packages/common-config/src/components/HeroSection/index.tsx(1 hunks)packages/common-config/src/components/IlustrationsContainer/index.tsx(1 hunks)packages/common-config/src/components/index.ts(2 hunks)packages/common-config/src/types/css.d.ts(1 hunks)packages/common-config/src/types/docusaurus__link.d.ts(1 hunks)packages/common-config/static/common/styles/global.css(5 hunks)packages/common-config/tsconfig.json(1 hunks)sites/template/package.json(1 hunks)sites/template/src/pages/index.tsx(2 hunks)sites/wonderland/docusaurus.config.ts(1 hunks)sites/wonderland/package.json(1 hunks)sites/wonderland/src/components/CategoryCards/index.tsx(0 hunks)sites/wonderland/src/components/HeroSection/index.tsx(0 hunks)sites/wonderland/src/css/local.css(1 hunks)sites/wonderland/src/pages/index.tsx(2 hunks)
💤 Files with no reviewable changes (3)
- packages/common-config/src/components/HandbookSection/styles.module.css
- sites/wonderland/src/components/HeroSection/index.tsx
- sites/wonderland/src/components/CategoryCards/index.tsx
🧰 Additional context used
🧠 Learnings (11)
📓 Common learnings
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: scripts/src/create-handbook.ts:0-0
Timestamp: 2025-07-03T19:07:42.089Z
Learning: In the defi-wonderland/handbook repository, the `sites/template` directory is a repository structure that's guaranteed to have a package.json file, so validation checks for package.json existence are not needed in the create-handbook script.
sites/wonderland/package.json (2)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: scripts/src/create-handbook.ts:0-0
Timestamp: 2025-07-03T19:07:42.089Z
Learning: In the defi-wonderland/handbook repository, the `sites/template` directory is a repository structure that's guaranteed to have a package.json file, so validation checks for package.json existence are not needed in the create-handbook script.
packages/common-config/src/types/docusaurus__link.d.ts (1)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
packages/common-config/tsconfig.json (1)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
sites/wonderland/docusaurus.config.ts (1)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
packages/common-config/src/components/index.ts (1)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
packages/common-config/preset/commonDocusaurusConfig.ts (1)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
packages/common-config/src/types/css.d.ts (1)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
packages/common-config/package.json (1)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
sites/wonderland/src/pages/index.tsx (2)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: scripts/src/create-handbook.ts:0-0
Timestamp: 2025-07-03T19:07:42.089Z
Learning: In the defi-wonderland/handbook repository, the `sites/template` directory is a repository structure that's guaranteed to have a package.json file, so validation checks for package.json existence are not needed in the create-handbook script.
packages/common-config/src/components/HandbookSection/index.tsx (1)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
🧬 Code Graph Analysis (1)
sites/template/src/pages/index.tsx (2)
packages/common-config/src/components/CategoryCards/index.tsx (3)
Category(5-9)CategoryCardsTheme(11-15)CategoryCards(22-77)packages/common-config/src/components/index.ts (3)
Category(18-18)CategoryCardsTheme(19-19)CategoryCards(28-28)
🔇 Additional comments (19)
sites/template/package.json (1)
43-44: @types/react@19.0.0 and @types/react-dom@19.0.0 are available on npm – no changes needed
Ran:npm view @types/react@19.0.0 version npm view @types/react-dom@19.0.0 versionBoth returned
19.0.0, confirming these typings are published. You can leave lines 43–44 insites/template/package.jsonas-is.Likely an incorrect or invalid review comment.
packages/common-config/src/types/css.d.ts (1)
1-9: Solid declaration file – nothing to addThe ambient module declarations cover both CSS modules and plain CSS imports and are tree-shakable. ✅
packages/common-config/static/common/styles/global.css (1)
1433-1460: Assets relocation verifiedAll referenced SVGs exist in
packages/common-config/static/common/img, so the updated URLs will resolve correctly:
- OP logo: packages/common-config/static/common/img/OPlogo.svg
- Aztec logo: packages/common-config/static/common/img/azteclogo.svg
- Chevron icon: packages/common-config/static/common/img/icons/chevron-down.svg
No further changes needed.
sites/wonderland/docusaurus.config.ts (1)
42-44: CSS ordering flipped – verify override intent
customCssis concatenated in the given order; rules in later files win.
By movinglocal.cssbeforeglobal.css, any overlapping selectors inglobal.cssnow override site-specific tweaks.Confirm this is intentional; otherwise swap them back.
packages/common-config/src/components/CategoryCards/styles.module.css (1)
69-71: Nice touch: opt-out hover effect classThe
noIconHoverEffectmodifier is straightforward and readable. 👍sites/wonderland/package.json (1)
43-44: Typings for React 19 Are PublishedThe versions you’ve specified are available on npm:
@types/react@19.1.8@types/react-dom@19.1.6You can safely keep these version pins.
packages/common-config/tsconfig.json (1)
9-15: TS config additions look good
react-jsx, declaration output andskipLibCheckare sensible choices for a shared component package.
No blocking issues spotted. 👍packages/common-config/package.json (2)
13-13: LGTM: New component export path properly configured.The new export path
"./components"correctly points to the component index file, enabling clean imports from consuming packages.
29-30: React 19.0.0 compatibility confirmed with Docusaurus 3.7.0Bumping React and React DOM to 19.0.0 in
packages/common-config/package.json(lines 29–30 and 35–36) is safe—Docusaurus 3.7.x adds explicit support for React 19 and the official site already runs on it.To prepare your codebase for React 19’s breaking changes, please verify or update the following where relevant:
• Build setup: enable the new JSX transform and remove any legacy JSX presets.
• Root rendering: replaceReactDOM.render/hydratecalls withReactDOM.createRoot(...).render(...)andReactDOM.hydrateRoot(...).
• Error boundaries: update to the newonUncaughtError/onCaughtErrorAPIs if you rely on custom error handling.
• Script loading: switch from UMD bundles to ESM-based CDNs if you include React via<script>.
• StrictMode behavior: review anyuseMemo/useCallbacklogic for changes in double-render behavior.
• (Optional) Explore new hooks/APIs likeuseActionState,useOptimistic, anduseFormStatus.No further changes are required in this PR—your version bump is good to go.
packages/common-config/src/components/index.ts (1)
1-25: LGTM: Well-structured component exports with proper TypeScript typing.The separation of type-only imports and explicit type exports follows TypeScript best practices. This enables consuming packages to cleanly import both components and their associated types.
packages/common-config/src/components/IlustrationsContainer/index.tsx (1)
4-34: LGTM: Excellent refactoring from static to prop-driven component.The component has been successfully refactored to accept image sources as props, making it reusable across different sites. The TypeScript interface is well-defined and the implementation follows React best practices.
sites/template/src/pages/index.tsx (2)
4-8: LGTM: Clean import from shared component package.The import structure correctly utilizes the new shared components and their types from
@handbook/common-config/components.
54-57: LGTM: Proper component integration with typed props.The CategoryCards component is correctly integrated with explicit props, following the new pattern of prop-driven components from the shared package.
sites/wonderland/src/pages/index.tsx (3)
3-17: LGTM: Excellent refactoring to shared component architecture.The migration to shared components with proper TypeScript typing is well-executed. The import structure is clean and follows the new centralized approach.
19-78: LGTM: Well-structured prop definitions with proper typing.The constant definitions are excellently structured with:
- Proper TypeScript typing for all props
- Clear separation of concerns
- Maintainable data structure
- Consistent naming conventions
92-98: LGTM: Clean component integration with spread props.The component integration using spread props is clean and follows React best practices. The explicit prop passing ensures type safety and maintainability.
packages/common-config/src/components/HeroSection/index.tsx (1)
1-46: Well-structured shared component implementation.The HeroSection component is properly implemented with good TypeScript typing, accessibility features (alt text), and appropriate use of Docusaurus Link component. The props interface provides clear API surface for consumers.
packages/common-config/src/components/CategoryCards/index.tsx (1)
41-76: Excellent theming system implementation.The theme system with CSS custom properties, default theme fallback, and conditional class application is well-designed and provides good flexibility for different sites.
packages/common-config/src/components/HandbookSection/index.tsx (1)
4-15: Well-defined TypeScript interfaces for props.The addition of
bgImageto the Handbook interface and the newHandbookSectionPropsinterface provide clear API contracts for the component's consumers.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
sites/template/docusaurus.config.ts (1)
65-70: Consider accessibility improvements and maintainability concerns.The inline HTML approach works for Docusaurus but has some considerations:
- Accessibility: The button should include proper ARIA attributes for screen readers
- Maintainability: Inline CSS and HTML in config files can be harder to maintain as the project grows
Consider adding ARIA attributes to improve accessibility:
-<button id="disclaimer-btn" style="background: none; border: none; color: #5D6B98; cursor: pointer; margin-left: 8px; display: flex; align-items: center; font-size: 14px; font-family: inherit; transition: color 0.2s ease;">Disclaimer</button> +<button id="disclaimer-btn" style="background: none; border: none; color: #5D6B98; cursor: pointer; margin-left: 8px; display: flex; align-items: center; font-size: 14px; font-family: inherit; transition: color 0.2s ease;" aria-label="Show disclaimer information">Disclaimer</button>While the inline approach works for Docusaurus, consider extracting styles to a CSS file if this pattern grows.
sites/template/src/theme/Root/index.tsx (1)
91-99: Add semantic HTML structure for better accessibility.The modal content lacks proper semantic structure for screen readers.
Improve the modal content structure:
<SimpleModal isOpen={showModal} onClose={handleCloseModal}> - <h2>Disclaimer</h2> + <h2 id="modal-title">Disclaimer</h2> <p> This handbook is not intended to replace official documentation. This is internal material used for onboarding new team members. We open source it in the hopes that it helps somebody else, but beware it can be outdated on the latest updates. </p> </SimpleModal>This provides a proper heading structure and connects the modal title to the
aria-labelledbyattribute.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
packages/common-config/src/components/HandbookSection/index.tsx(3 hunks)packages/common-config/src/types/docusaurus__link.d.ts(1 hunks)sites/template/docusaurus.config.ts(1 hunks)sites/template/src/theme/Root/index.tsx(1 hunks)sites/wonderland/src/pages/index.tsx(2 hunks)sites/wonderland/src/theme/Root/index.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/common-config/src/types/docusaurus__link.d.ts
- sites/wonderland/src/pages/index.tsx
- packages/common-config/src/components/HandbookSection/index.tsx
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#50
File: packages/common-config/src/components/HandbookSection/index.tsx:24-28
Timestamp: 2025-07-08T17:34:12.884Z
Learning: In the defi-wonderland/handbook monorepo, the build command copies assets so that `/common/img/star-icon.svg` and similar paths in the common-config package are always available to consuming projects, eliminating the need for configurable asset paths.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#50
File: packages/common-config/src/components/CategoryCards/index.tsx:26-39
Timestamp: 2025-07-08T17:47:11.748Z
Learning: In the defi-wonderland/handbook monorepo CategoryCards component, the custom click handler with preventDefault, window.scrollTo, and setTimeout before window.location.href navigation was chosen as the best solution after exploring Docusaurus-based and native React approaches that didn't work for this specific use case.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: scripts/src/create-handbook.ts:0-0
Timestamp: 2025-07-03T19:07:42.089Z
Learning: In the defi-wonderland/handbook repository, the `sites/template` directory is a repository structure that's guaranteed to have a package.json file, so validation checks for package.json existence are not needed in the create-handbook script.
sites/template/docusaurus.config.ts (1)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
sites/template/src/theme/Root/index.tsx (1)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#50
File: packages/common-config/src/components/CategoryCards/index.tsx:26-39
Timestamp: 2025-07-08T17:47:11.748Z
Learning: In the defi-wonderland/handbook monorepo CategoryCards component, the custom click handler with preventDefault, window.scrollTo, and setTimeout before window.location.href navigation was chosen as the best solution after exploring Docusaurus-based and native React approaches that didn't work for this specific use case.
🧬 Code Graph Analysis (2)
sites/wonderland/src/theme/Root/index.tsx (1)
sites/template/src/theme/Root/index.tsx (1)
Root(63-102)
sites/template/src/theme/Root/index.tsx (1)
sites/wonderland/src/theme/Root/index.tsx (1)
Root(3-5)
🔇 Additional comments (1)
sites/wonderland/src/theme/Root/index.tsx (1)
1-5: Clean simplification of the Root component.The removal of modal functionality and simplification to just render children improves maintainability and follows the single responsibility principle. This is a good refactor.
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (1)
packages/common-config/src/components/HandbookSection/index.tsx (1)
79-83: Add descriptive alt text for decorative star icon.Based on the retrieved learnings, the asset paths are handled correctly by the build process, but the alt text should be more descriptive.
The star icon should have either a descriptive alt text or be marked as decorative:
<img src="/common/img/star-icon.svg" - alt="" + alt="Decorative star icon" className={styles.starMobile} />
🧹 Nitpick comments (1)
packages/common-config/src/components/HandbookSection/index.tsx (1)
91-102: Clarify the single handbook rendering logic.When there's only one handbook, the component renders it twice - once normal and once as default. This behavior might be confusing and should be documented or reconsidered.
Consider adding a comment to explain this design decision:
{handbooks.length === 1 ? ( <> + {/* Render single handbook alongside a placeholder to maintain visual balance */} {/* First handbook card */} <HandbookCard handbook={handbooks[0]} /> {/* Default handbook card (not a link) */} <HandbookCard handbook={handbooks[0]} isDefault /> </>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/common-config/src/components/HandbookSection/index.tsx(1 hunks)packages/common-config/src/components/HandbookSection/styles.module.css(0 hunks)sites/wonderland/src/pages/index.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- packages/common-config/src/components/HandbookSection/styles.module.css
🚧 Files skipped from review as they are similar to previous changes (1)
- sites/wonderland/src/pages/index.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#50
File: packages/common-config/src/components/HandbookSection/index.tsx:24-28
Timestamp: 2025-07-08T17:34:12.884Z
Learning: In the defi-wonderland/handbook monorepo, the build command copies assets so that `/common/img/star-icon.svg` and similar paths in the common-config package are always available to consuming projects, eliminating the need for configurable asset paths.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#50
File: packages/common-config/src/components/CategoryCards/index.tsx:26-39
Timestamp: 2025-07-08T17:47:11.748Z
Learning: In the defi-wonderland/handbook monorepo CategoryCards component, the custom click handler with preventDefault, window.scrollTo, and setTimeout before window.location.href navigation was chosen as the best solution after exploring Docusaurus-based and native React approaches that didn't work for this specific use case.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: scripts/src/create-handbook.ts:0-0
Timestamp: 2025-07-03T19:07:42.089Z
Learning: In the defi-wonderland/handbook repository, the `sites/template` directory is a repository structure that's guaranteed to have a package.json file, so validation checks for package.json existence are not needed in the create-handbook script.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#50
File: packages/common-config/preset/commonDocusaurusConfig.ts:50-53
Timestamp: 2025-07-08T17:52:29.143Z
Learning: In the defi-wonderland/handbook repository, for external handbook URLs in the navbar dropdown (like "https://handbook.wonderland.xyz/optimism"), the `to` property is used instead of `href` to avoid adding the openInNew icon since these are considered internal links within the handbook ecosystem from a UX perspective.
packages/common-config/src/components/HandbookSection/index.tsx (5)
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#50
File: packages/common-config/src/components/CategoryCards/index.tsx:26-39
Timestamp: 2025-07-08T17:47:11.748Z
Learning: In the defi-wonderland/handbook monorepo CategoryCards component, the custom click handler with preventDefault, window.scrollTo, and setTimeout before window.location.href navigation was chosen as the best solution after exploring Docusaurus-based and native React approaches that didn't work for this specific use case.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: sites/template/docusaurus.config.ts:70-70
Timestamp: 2025-07-03T21:13:49.173Z
Learning: In the defi-wonderland/handbook repository, when using webpack-merge to merge configurations in Docusaurus config files, the commonConfig is typed as Partial<Config> and localConfig is typed as Config. This means that merge(commonConfig, localConfig) maintains type safety without needing explicit type assertions, as TypeScript properly handles the merge of a partial configuration with a full configuration.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#50
File: packages/common-config/preset/commonDocusaurusConfig.ts:50-53
Timestamp: 2025-07-08T17:52:29.143Z
Learning: In the defi-wonderland/handbook repository, for external handbook URLs in the navbar dropdown (like "https://handbook.wonderland.xyz/optimism"), the `to` property is used instead of `href` to avoid adding the openInNew icon since these are considered internal links within the handbook ecosystem from a UX perspective.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#50
File: packages/common-config/src/components/HandbookSection/index.tsx:24-28
Timestamp: 2025-07-08T17:34:12.884Z
Learning: In the defi-wonderland/handbook monorepo, the build command copies assets so that `/common/img/star-icon.svg` and similar paths in the common-config package are always available to consuming projects, eliminating the need for configurable asset paths.
Learnt from: th0rOdinson
PR: defi-wonderland/handbook#46
File: scripts/src/create-handbook.ts:0-0
Timestamp: 2025-07-03T19:07:42.089Z
Learning: In the defi-wonderland/handbook repository, the `sites/template` directory is a repository structure that's guaranteed to have a package.json file, so validation checks for package.json existence are not needed in the create-handbook script.
⏰ Context from checks skipped due to timeout of 300000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: test
🔇 Additional comments (1)
packages/common-config/src/components/HandbookSection/index.tsx (1)
4-21: Well-designed discriminated union types for handbook backgrounds.The type definitions use discriminated unions effectively, providing type safety for different background configurations. The
HandbookBackgroundtype ensures that the correct properties are available based on thebgType.
0xLeopoldo
left a comment
0xLeopoldo
left a comment
There was a problem hiding this comment.
🚀 LGTM! 🔥 Great work th0r!
3 participants
@common-configpackageIssue https://linear.app/defi-wonderland/issue/CHA-339/monorepo-refactor-for-common-components-abstraction
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Chores