feat: added scroll indicator #418
Conversation
|
@Sourabh782 is attempting to deploy a commit to the Sanchit Bajaj's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe recent changes introduce a Changes
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Great job, @Sourabh782! 🎉 Thank you for submitting your pull request. Your contribution is valuable and we appreciate your efforts to improve our project. Keep being the part of the community!
'We will promptly review your changes and offer feedback. Keep up the excellent work!
Kindly remember to check our Contributing Guidelines'
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (1)
src/components/ProgressBar/index.tsx (1)
17-17: Remove console log statement.The
console.log(progressWidth)statement is likely for debugging purposes and should be removed in production code.- console.log(progressWidth)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- src/app/page.tsx (2 hunks)
- src/components/ProgressBar/index.tsx (1 hunks)
- src/components/core/navbar/index.tsx (1 hunks)
Files skipped from review due to trivial changes (1)
- src/components/core/navbar/index.tsx
Additional comments not posted (3)
src/app/page.tsx (1)
Line range hint
6-17: Integration ofProgressBarlooks good!The
ProgressBarcomponent is correctly imported and integrated into theHomefunction. Ensure that its placement above theNavbaraligns with the design requirements.src/components/ProgressBar/index.tsx (2)
4-32: Component structure and styling are appropriate.The component structure and styling ensure the progress bar is fixed at the top and visually distinct. The use of
backdrop-blur-smandz-10ensures it remains visible and unobtrusive.
7-24: Verify scroll calculation logic.The scroll percentage calculation seems correct, but ensure it works as expected across different browsers and screen sizes.
Verification successful
Scroll Calculation Logic Verified
The scroll percentage calculation logic in the
handleScrollfunction appears to be correctly implemented. It calculates the scroll percentage by dividing the current scroll position (scrollY) by the difference between the document height and the window height, then multiplies by 100. This approach should work across different browsers and screen sizes as it dynamically adjusts based on the viewport and document dimensions.
- File:
src/components/ProgressBar/index.tsx- Lines: 7-24
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the scroll percentage calculation in the ProgressBar component. # Test: Ensure the calculation logic is consistent across different browsers and screen sizes. # Expect: The progress bar accurately reflects the scroll position. rg --type js -A 10 $'const handleScroll = () => { const windowHeight = window.innerHeight; const docHeight = document.documentElement.scrollHeight; const scrollY = window.scrollY; const scrollPercentage = Math.floor((scrollY / (docHeight - windowHeight)) * 100); }'Length of output: 783
Script:
#!/bin/bash # Search for the handleScroll function and include context lines to verify the scroll calculation logic. rg --type js 'const handleScroll' -A 10Length of output: 41
Script:
#!/bin/bash # Search for the handleScroll function in TypeScript files and include context lines to verify the scroll calculation logic. rg --type ts 'const handleScroll' -A 10Length of output: 840
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- src/components/ProgressBar/index.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/components/ProgressBar/index.tsx
src/app/page.tsx
Outdated
| @@ -13,6 +14,7 @@ export default async function Home() { | |||
|
|
|||
| return ( | |||
| <> | |||
| <ProgressBar /> | |||
There was a problem hiding this comment.
can't we use the framer motion here? The same is implemented in:
src/components/pages/contribute/index.tsx
There was a problem hiding this comment.
Sure working on it
src/components/ProgressBar/index.tsx
Outdated
| @@ -0,0 +1,33 @@ | |||
| "use client"; | |||
There was a problem hiding this comment.
feels a lot of extra work since this feature is already developed
Sanchitbajaj02
added
⭐ enhancement
|
Sure working on it 👍 |
|
@Sanchitbajaj02 hello sir, actually i am having an issue here, as u said to use framer motion library so i can use that, but the
to use frammer motion directly i have to use "use client" which generate this error. but if i implement it using another component ( moving scroll Indicator's code to another component ), it is working fine. so can i implement it by making a seprate component that uses frammer motion? |
What you can do in this case is, modify your progressbar component using framer motion. |
|
Sure sir, just before making pr can u check it? Also can i replace that peice of frammer motion also from where i took this? in this way it would be reusable |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- src/app/page.tsx (2 hunks)
- src/components/ProgressBar/index.tsx (1 hunks)
- src/components/pages/contribute/index.tsx (2 hunks)
Files skipped from review due to trivial changes (1)
- src/app/page.tsx
Files skipped from review as they are similar to previous changes (1)
- src/components/ProgressBar/index.tsx
Additional comments not posted (2)
src/components/pages/contribute/index.tsx (2)
83-83: LGTM! Verify the functionality of theProgressBar.The integration of
ProgressBarlooks good. Ensure that it functions as expected with the scroll animation.Verification successful
Integration of
ProgressBaris verified. TheProgressBarcomponent correctly utilizes thescaleXanimation, confirming its intended functionality with the scroll animation.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the functionality of the `ProgressBar` component. # Test: Check if the `ProgressBar` component utilizes the `scaleX` animation. rg --type typescript -A 5 'ProgressBar' | grep 'scaleX'Length of output: 88
Script:
#!/bin/bash # Description: Verify the functionality of the `ProgressBar` component. # Test: Check if the `ProgressBar` component utilizes the `scaleX` animation. rg --type ts -A 5 'ProgressBar' | grep 'scaleX'Length of output: 130
8-8: Verify the existence of theProgressBarcomponent.Ensure that the
ProgressBarcomponent is implemented and exported correctly from the specified path.
Related Issue
fixes: #417
Description
Added a Scroll Indicator at the top of site, with matching theme for both dark and light mode. working efficiently as we scroll through the site, also working with the "to the top button" responsively.
Screenshots
Palettegram.-.Social.Media.for.Professionals.-.Google.Chrome.2024-08-08.12-57-01.mp4
Changes in code base:
Added a ProgressBar Component
Summary by CodeRabbit
ProgressBarcomponent to visually indicate scroll progress on the homepage and the contribution guide page.Navbarpositioning for improved visual layout by adding a gap from the top of the viewport.