feat: add styled 404 page with custom pill header and bunny mascot#745
feat: add styled 404 page with custom pill header and bunny mascot#745bhanreddy1973 wants to merge 3 commits intokeploy:mainfrom
Conversation
- Implemented custom 404 page with Keploy branding - Added floating pill header with Technology, Community, and Resources links - Included VS Code and GitHub badges in the custom header - Added search button logic to trigger DocSearch - Created custom SVG illustration of Keploy bunny mascot - Implemented logic to hide global Docusaurus components on 404 route - Ensured responsive design for mobile and desktop Fixes keploy/keploy#3441 Signed-off-by: Bhanu Reddy <bhanu.reddy_int@external.swiggy.in>
There was a problem hiding this comment.
Hey @bhanreddy1973, we don’t want to make any design changes in the docs header—please focus only on fixing the 404 issue. The redirection should point to /docs/; we don’t want to show any separate page.
Additionally, please include a short video demonstrating your changes and make sure to fix all the failing pipelines.
amaan-bhati
left a comment
There was a problem hiding this comment.
Hey @bhanreddy1973
Thanks for raising this pr and trying to help us improve, unfortunately we'd be closing this pr since this iwas rejected earlier and the ui of the header is also tweaked which is not needed. We appreaciate the time and effort youve put into this, you can continue contributing by picking up the issues from our issues tab: issues tab keploy
What has changed?
This PR implements a custom, branded 404 page for the Keploy documentation website as requested in Issue #3441.
Summary of Changes:
Fixes keploy/keploy#3441
Type of change
How Has This Been Tested?
Tested locally using
npm startand visiting non-existent URLs like/docs/xyz.Screenshots:
404 Page (Desktop View):
404 Page (Mobile View):
Build Output:
npm run build
Build completed successfully## Checklist:
Files Changed:
src/theme/NotFound/index.js- Layout wrapper with noNavbar/noFooter propssrc/theme/NotFound/Content/index.js- Main 404 page UI and logic (custom header + theme toggle + slack button + illustration)src/css/custom.css- CSS rules to hide global Docusaurus components