From 76375d1d388ae46736a3dd360435d59201e108ab Mon Sep 17 00:00:00 2001 From: Bhanu Reddy Date: Fri, 2 Jan 2026 22:52:56 +0530 Subject: [PATCH 1/2] feat: add styled 404 page with custom pill header and bunny mascot - 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 --- src/css/custom.css | 11 ++ src/theme/NotFound/Content/index.js | 263 +++++++++++++++++++++++++++- src/theme/NotFound/index.js | 5 +- 3 files changed, 270 insertions(+), 9 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index b40fda1aa..26f810a2a 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -874,3 +874,14 @@ textarea { } + +/* Hide global components on 404 page */ +html.keploy-notfound-active .navbar, +html.keploy-notfound-active nav.navbar, +html.keploy-notfound-active div[class*="announcementBar"], +html.keploy-notfound-active div[class^="announcementBar_"] { + display: none !important; + height: 0 !important; + visibility: hidden !important; + overflow: hidden !important; +} diff --git a/src/theme/NotFound/Content/index.js b/src/theme/NotFound/Content/index.js index 7414dc0cf..b8f3e2e4c 100644 --- a/src/theme/NotFound/Content/index.js +++ b/src/theme/NotFound/Content/index.js @@ -1,13 +1,260 @@ -import {useEffect} from "react"; +import React, {useEffect} from "react"; +import Link from "@docusaurus/Link"; +import {useHistory} from "@docusaurus/router"; -export default function NotFound() { +export default function NotFoundContent() { + const history = useHistory(); + + // Hide the global Docusaurus navbar/announcement bar on 404 useEffect(() => { - if (typeof window !== "undefined") { - // immediate redirect without adding to browser history - window.location.replace("/docs"); - } + if (typeof document === "undefined") return; + + // Nuclear option: Direct DOM manipulation to hide headers + const hideHeaders = () => { + const selectors = [ + '.navbar', + 'nav.navbar', + 'div[class*="announcementBar"]', + 'div[class^="announcementBar_"]', + '.navbar__inner' + ]; + selectors.forEach(selector => { + document.querySelectorAll(selector).forEach(el => { + el.style.display = 'none'; + el.style.visibility = 'hidden'; + el.style.height = '0'; + }); + }); + }; + + // Run immediately + hideHeaders(); + + // Also run on a small delay because Docusaurus might re-render + const timer = setTimeout(hideHeaders, 500); + const timer2 = setTimeout(hideHeaders, 2000); + + document.documentElement.classList.add("keploy-notfound-active"); + + return () => { + clearTimeout(timer); + clearTimeout(timer2); + document.documentElement.classList.remove("keploy-notfound-active"); + // Restore headers when leaving 404 + const selectors = ['.navbar', 'nav.navbar', 'div[class*="announcementBar"]']; + selectors.forEach(selector => { + document.querySelectorAll(selector).forEach(el => { + el.style.display = ''; + el.style.visibility = ''; + el.style.height = ''; + }); + }); + }; }, []); - // render nothing (no content shown) - return null; + const openSearch = () => { + if (typeof window === "undefined") return; + const isMac = /Mac|iPhone|iPad|iPod/i.test(window.navigator?.platform ?? ""); + window.dispatchEvent( + new KeyboardEvent("keydown", { + key: "k", + code: "KeyK", + metaKey: isMac, + ctrlKey: !isMac, + bubbles: true, + }) + ); + }; + + const handleGoBack = () => { + if (history.length > 1) { + history.goBack(); + } else { + history.push("/docs"); + } + }; + + const isMac = typeof window !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(window.navigator?.platform ?? ""); + + return ( +
+ {/* Custom Pill Header */} +
+
+
+ {/* Logo */} + + Keploy + + + {/* Nav Menu (desktop only) */} + + + {/* Right Side */} +
+ {/* Search */} + + + {/* Badges */} + + + + + 1.1M + + + + + + + 14.3K + + + {/* Sign In */} + + Sign in + +
+
+
+
+ + {/* Main 404 Content */} +
+ {/* Left Side - Text */} +
+

+ Oops! 404 +

+

+ Not Found... +

+ +

+ Looks like you've wandered off the beaten path. Our team is working to get you back on track and find what you're looking for. +

+ + {/* Buttons */} +
+ + Back To Home + + + +
+
+ + {/* Right Side - Bunny Illustration */} +
+ + {/* Wooden Log Base */} + + + + + + + + + + {/* Bunny Body */} + + + + + {/* Bunny Head */} + + + + {/* Ears */} + + + + + + {/* Eyes */} + + + + + + + + {/* Eyebrows */} + + + + {/* Nose & Mouth */} + + + + + {/* Cheeks */} + + + + {/* Paws */} + + + + {/* Warning Sign */} + + + + + + + + +
+
+
+ ); } diff --git a/src/theme/NotFound/index.js b/src/theme/NotFound/index.js index 408b443fc..3205479f4 100644 --- a/src/theme/NotFound/index.js +++ b/src/theme/NotFound/index.js @@ -3,15 +3,18 @@ import {translate} from "@docusaurus/Translate"; import {PageMetadata} from "@docusaurus/theme-common"; import Layout from "@theme/Layout"; import NotFoundContent from "@theme/NotFound/Content"; + export default function Index() { const title = translate({ id: "theme.NotFound.title", message: "Page Not Found", }); + return ( <> - + {/* Hide default navbar since 404 page has custom header */} + From 3071f14ce7b63f4679cc0e160e4efed2467a3684 Mon Sep 17 00:00:00 2001 From: Bhanu Reddy Date: Sat, 3 Jan 2026 00:16:15 +0530 Subject: [PATCH 2/2] chore: revert custom logo, add theme toggle and slack button --- src/theme/NotFound/Content/index.js | 260 ++++++++++++++-------------- 1 file changed, 129 insertions(+), 131 deletions(-) diff --git a/src/theme/NotFound/Content/index.js b/src/theme/NotFound/Content/index.js index b8f3e2e4c..89860f636 100644 --- a/src/theme/NotFound/Content/index.js +++ b/src/theme/NotFound/Content/index.js @@ -1,15 +1,16 @@ import React, {useEffect} from "react"; import Link from "@docusaurus/Link"; import {useHistory} from "@docusaurus/router"; +import {useColorMode} from "@docusaurus/theme-common"; export default function NotFoundContent() { const history = useHistory(); + const {colorMode, setColorMode} = useColorMode(); // Hide the global Docusaurus navbar/announcement bar on 404 useEffect(() => { if (typeof document === "undefined") return; - // Nuclear option: Direct DOM manipulation to hide headers const hideHeaders = () => { const selectors = [ '.navbar', @@ -27,10 +28,7 @@ export default function NotFoundContent() { }); }; - // Run immediately hideHeaders(); - - // Also run on a small delay because Docusaurus might re-render const timer = setTimeout(hideHeaders, 500); const timer2 = setTimeout(hideHeaders, 2000); @@ -40,7 +38,6 @@ export default function NotFoundContent() { clearTimeout(timer); clearTimeout(timer2); document.documentElement.classList.remove("keploy-notfound-active"); - // Restore headers when leaving 404 const selectors = ['.navbar', 'nav.navbar', 'div[class*="announcementBar"]']; selectors.forEach(selector => { document.querySelectorAll(selector).forEach(el => { @@ -77,12 +74,43 @@ export default function NotFoundContent() { const isMac = typeof window !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(window.navigator?.platform ?? ""); return ( -
+
+ + {/* Custom Pill Header */} -
-
+
+
- {/* Logo */} - {/* Nav Menu (desktop only) */} - {/* Right Side */}
{/* Search */} + + + {/* Theme Switcher */} - {/* Badges */} - + + Slack + + + {/* VS Code badge */} + 1.1M - - @@ -141,118 +174,83 @@ export default function NotFoundContent() { 14.3K - {/* Sign In */} - - Sign in - + Sign in
- {/* Main 404 Content */} -
- {/* Left Side - Text */} + {/* Main Content */} +
-

- Oops! 404 -

-

- Not Found... -

+

Error Code: 404

+

Oops! 404

+

Not Found...

+

Looks like you've wandered off the beaten path. Our team is working to get you back on track.

-

- Looks like you've wandered off the beaten path. Our team is working to get you back on track and find what you're looking for. -

- - {/* Buttons */}
- - Back To Home - - - + Back To Home +
- {/* Right Side - Bunny Illustration */} -
- - {/* Wooden Log Base */} - - - - - - - - + {/* 🐰 Bunny on log (classic mode) */} +
+
+ + {/* Log */} + + + + + + + + - {/* Bunny Body */} - - - + {/* Bunny body */} + + - {/* Bunny Head */} - - + {/* Bunny head */} + + - {/* Ears */} - - - - + {/* Ears */} + + + + - {/* Eyes */} - - - - - - + {/* Eyes */} + + + + + + - {/* Eyebrows */} - - + {/* Nose & mouth */} + + + - {/* Nose & Mouth */} - - - + {/* Paws */} + + - {/* Cheeks */} - - - - {/* Paws */} - - - - {/* Warning Sign */} - - - - - - - - + {/* Warning sign */} + + + + + + + + +
+ {/* Shadow */} +