fix: star-on-github-button-responsiveness #4576
Conversation
BensOmnitrix
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg and
sambhavgupta0705
as code owners
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughThis PR introduces responsive behavior to the GithubButton component by adding a new Changes
Sequence DiagramsequenceDiagram
participant Component as GithubButton
participant Hook as useWindowSize
participant Window as Browser Window
participant Render as Render Output
Component->>Hook: Call useWindowSize()
Hook->>Window: Subscribe to resize events
Hook->>Hook: Initialize state (width: 0, height: 0)
Hook->>Window: Get window.innerWidth/innerHeight on mount
Hook->>Hook: Update state with dimensions
Window->>Hook: Fire resize event
Hook->>Hook: Update state with new dimensions
Hook->>Component: Return current windowSize
alt width > 1144px
Component->>Render: Render full Button with icon
else width ≤ 1144px
Component->>Render: Render Link with icon only
end
Component->>Window: Cleanup resize listener on unmount
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10–15 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4576--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
utils/windowSize.ts (1)
14-27: Optional: Consider consistent function naming.The function name
handleReSizehas unusual casing. Standard convention would behandleResize(lowercase 's' in 'size').- const handleReSize = () => { + const handleResize = () => { setWindowSize({ width: window.innerWidth, height: window.innerHeight, }); }; - handleReSize(); - window.addEventListener('resize', handleReSize); - return () => window.removeEventListener('resize', handleReSize); + handleResize(); + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize);
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
components/buttons/GithubButton.tsx(2 hunks)utils/windowSize.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
components/buttons/GithubButton.tsx (3)
utils/windowSize.ts (1)
useWindowSize(9-30)components/buttons/Button.tsx (1)
Button(53-106)components/icons/Github.tsx (1)
IconGithub(7-13)
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: Lighthouse CI
|
/ready-to-merge |
2 participants
Description
Final look after the fix
Related issue(s)
Summary by CodeRabbit