feat: add custom 404 error page#334
Open
JayRathore10 wants to merge 2 commits into
Open
Conversation
❌ Deploy Preview for github-spy failed.
|
Contributor
📝 WalkthroughWalkthroughThis PR adds a dedicated custom 404 error page that renders when users navigate to non-existent routes. A new ChangesCustom 404 Page
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/Routes/Router.tsx (1)
24-27: ⚡ Quick winMove the wildcard route to the end of the Routes block.
While React Router v6's path ranking ensures the
/activityroute will match correctly despite appearing after the wildcard, placing the catch-allpath="*"route last is a best practice that improves readability and prevents confusion.📍 Suggested reordering
<Route path="/contributor/:username" element={<ContributorProfile />} /> - <Route path="*" element={<Custom404 />} /> {/* ✅ new route */} <Route path="/activity" element={<Activity />} /> + <Route path="*" element={<Custom404 />} /> </Routes>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/Routes/Router.tsx` around lines 24 - 27, The wildcard route Route path="*" element={<Custom404 />} is placed before the new Route path="/activity" element={<Activity />}; move the catch-all Route (the one with path="*"/Custom404) to the very end of the Routes block so all specific routes like the /activity Route are listed before the wildcard for clarity and best-practice ordering.src/pages/404.tsx (1)
5-26: ⚡ Quick winConsider adding dark mode support.
The linked issue
#333mentions "dark mode support if applicable." While the current light-mode implementation meets the core requirements, adding Tailwinddark:variants would improve consistency with the rest of the application if dark mode is supported elsewhere.🌙 Suggested dark mode enhancement
- <section className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-gray-50 to-blue-100 px-6"> + <section className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-gray-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 px-6"> <div className="text-center"> - <h1 className="text-7xl md:text-8xl font-extrabold text-blue-600 mb-4"> + <h1 className="text-7xl md:text-8xl font-extrabold text-blue-600 dark:text-blue-400 mb-4"> 404 </h1> - <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4"> + <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4"> Page Not Found </h2> - <p className="text-gray-600 text-lg mb-8 max-w-md"> + <p className="text-gray-600 dark:text-gray-300 text-lg mb-8 max-w-md"> The page you are looking for does not exist or has been moved. </p> <Link to="/" - className="inline-block bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-700 transition-all transform hover:scale-105 shadow-lg" + className="inline-block bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-all transform hover:scale-105 shadow-lg" > Go Back Home </Link>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/404.tsx` around lines 5 - 26, Add Tailwind dark-mode variants to the 404 page elements so the page respects the app's dark theme: update the section, h1, h2, p and Link classNames (refer to the section element and the JSX elements <h1>, <h2>, <p>, and <Link>) to include appropriate dark: classes (e.g., dark:bg-*, dark:from-*, dark:to-*, dark:text-*, dark:hover:bg-*) that invert the background gradient and switch text colors for dark mode while preserving hover/transition styles; ensure contrast is maintained and the Link button has a dark:hover:bg variant as well.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@CONTRIBUTING.md`:
- Line 1: Leading spaces before Markdown headings cause MD023 failures; remove
the leading spaces so heading markers are left-aligned. Edit each indented
heading (e.g., " # 🌟 Contributing to GitHub Tracker" -> "# 🌟 Contributing to
GitHub Tracker") and the other reported headings (lines referenced in the
review) so the '#' appears at column 0 for each heading to satisfy the linter.
---
Nitpick comments:
In `@src/pages/404.tsx`:
- Around line 5-26: Add Tailwind dark-mode variants to the 404 page elements so
the page respects the app's dark theme: update the section, h1, h2, p and Link
classNames (refer to the section element and the JSX elements <h1>, <h2>, <p>,
and <Link>) to include appropriate dark: classes (e.g., dark:bg-*, dark:from-*,
dark:to-*, dark:text-*, dark:hover:bg-*) that invert the background gradient and
switch text colors for dark mode while preserving hover/transition styles;
ensure contrast is maintained and the Link button has a dark:hover:bg variant as
well.
In `@src/Routes/Router.tsx`:
- Around line 24-27: The wildcard route Route path="*" element={<Custom404 />}
is placed before the new Route path="/activity" element={<Activity />}; move the
catch-all Route (the one with path="*"/Custom404) to the very end of the Routes
block so all specific routes like the /activity Route are listed before the
wildcard for clarity and best-practice ordering.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 06dc3225-c6e1-418b-a483-aa8546298784
📒 Files selected for processing (3)
CONTRIBUTING.mdsrc/Routes/Router.tsxsrc/pages/404.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Feat #333 — Add Custom 404 Error Page
Description
This PR adds a custom 404 error page to improve the user experience when navigating to invalid or non-existing routes within the application.
Changes Implemented
Custom404page componentFeatures
Testing
Verified by visiting invalid routes such as:
Confirmed:
Closes #333
🏷️ Open Source Context
This PR is submitted as part of GSSoC (GirlScript Summer of Code) contribution.
👤 Contributor Profile
GSSoC Profile: https://gssoc.girlscript.org/profile/e47b2f4a-f3e9-4cb4-97b5-ddd8cb15a1e9
Screenshot
Summary by CodeRabbit
New Features
Documentation