diff --git a/src/hooks/use-original-req-url.tsx b/src/hooks/use-original-req-url.tsx new file mode 100644 index 000000000..5080f7fb2 --- /dev/null +++ b/src/hooks/use-original-req-url.tsx @@ -0,0 +1,24 @@ +import { useEffect, useState } from 'react'; +import { isBrowser } from '../utils/is-browser'; + +const parseCookies = () => window.document.cookie.split(';'); + +const getTargetedCookie = (cookies: string[]) => cookies.find((cookie) => cookie.trim().startsWith('originalRequest=')); + +export const useOriginalReqURL = () => { + const [originReqURL, setOriginalReqURL] = useState(null); + + useEffect(() => { + if (isBrowser) { + const cookies = parseCookies(); + // the target is set in B2K + const targetCookie = getTargetedCookie(cookies); + const cookie = targetCookie?.split('=')[1]; + if (cookie) { + setOriginalReqURL(cookie); + } + } + }, []); + + return { originReqURL }; +}; diff --git a/src/templates/NotFound.tsx b/src/templates/NotFound.tsx index d41bd64c2..145e1886f 100644 --- a/src/templates/NotFound.tsx +++ b/src/templates/NotFound.tsx @@ -6,14 +6,15 @@ import Button from '@leafygreen-ui/button'; import { palette } from '@leafygreen-ui/palette'; import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import { Body } from '@leafygreen-ui/typography'; +import { useOriginalReqURL } from '../hooks/use-original-req-url'; import { theme } from '../theme/docsTheme'; import { baseUrl } from '../utils/base-url'; import Link from '../components/Link'; import { BaseTemplateProps } from '.'; const ErrorBox = styled.div` - max-width: 455px; flex: 1 0.5 auto; + word-break: break-word; @media ${theme.screenSize.upToSmall} { padding: 0px ${theme.size.default}; @@ -35,7 +36,8 @@ const getSupportLinkDynamicStyle = (darkMode: boolean) => css` `; const ImageContainer = styled.div` - max-width: 455px; + margin-left: -27px; /* to account for the whitespace of the image */ + max-width: 226px; display: flex; justify-content: flex-start; flex: 0.5 1 auto; @@ -58,10 +60,10 @@ const NotFoundImage = () => { const errorTitleStyling = css` font-family: 'MongoDB Value Serif'; - font-size: 32px; - line-height: 40px; - margin-block-start: 1em; - margin-block-end: 1em; + line-height: 64px; + font-size: 48px; + margin-block-start: 0em; /* to account for the whitespace of the image */ + margin-block-end: 22px; @media ${theme.screenSize.upToSmall} { font-size: ${theme.fontSize.h2}; @@ -79,10 +81,22 @@ const LinkContainer = styled.div` const ErrorBoxContainer = () => { const { darkMode } = useDarkMode(); + const { originReqURL } = useOriginalReqURL(); + const decodedURL = originReqURL ? decodeURIComponent(originReqURL) : null; + return ( - Sorry, we can't find that page. - The page might have been moved or deleted. + + Sorry, we can't find that page. + + {decodedURL ? ( + + The page with the URL "{decodedURL}" does not exist. It might have been + moved or deleted. + + ) : ( + The page might have been moved or deleted. + )}