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..89860f636 100644 --- a/src/theme/NotFound/Content/index.js +++ b/src/theme/NotFound/Content/index.js @@ -1,13 +1,258 @@ -import {useEffect} from "react"; +import React, {useEffect} from "react"; +import Link from "@docusaurus/Link"; +import {useHistory} from "@docusaurus/router"; +import {useColorMode} from "@docusaurus/theme-common"; -export default function NotFound() { +export default function NotFoundContent() { + const history = useHistory(); + const {colorMode, setColorMode} = useColorMode(); + + // 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; + + 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'; + }); + }); + }; + + hideHeaders(); + 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"); + 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 */} +
+
+
+ + Keploy + + + + +
+ {/* Search */} + + + {/* Theme Switcher */} + + + {/* Slack */} + + + Slack + + + {/* VS Code badge */} + + + + + 1.1M + + + {/* GitHub badge */} + + + + + 14.3K + + + Sign in +
+
+
+
+ + {/* Main Content */} +
+
+

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.

+ +
+ Back To Home + +
+
+ + {/* 🐰 Bunny on log (classic mode) */} +
+
+ + {/* Log */} + + + + + + + + + + {/* Bunny body */} + + + + {/* Bunny head */} + + + + {/* Ears */} + + + + + + {/* Eyes */} + + + + + + + + {/* Nose & mouth */} + + + + + {/* Paws */} + + + + {/* Warning sign */} + + + + + + + + +
+ {/* Shadow */} +
+
+
+
+ ); } 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 */} +