From 2f8c1f9580448bf0301f3b80507159b2a8f9aefb Mon Sep 17 00:00:00 2001 From: Petar Ivanov <46651r@unibit.bg> Date: Tue, 2 Jan 2024 19:52:29 +0200 Subject: [PATCH] beautify not found page --- app/components/error-boundary.tsx | 17 +- app/root.tsx | 37 +- .../articles_.$categorySlug_.$postSlug.tsx | 37 +- package-lock.json | 33783 ++++++++-------- package.json | 1 + prisma/data.db | Bin 167936 -> 167936 bytes public/images/jackie-chan-confused.jpg | Bin 0 -> 101839 bytes 7 files changed, 16955 insertions(+), 16920 deletions(-) create mode 100644 public/images/jackie-chan-confused.jpg diff --git a/app/components/error-boundary.tsx b/app/components/error-boundary.tsx index 2771da6..b6c55a0 100644 --- a/app/components/error-boundary.tsx +++ b/app/components/error-boundary.tsx @@ -4,7 +4,7 @@ import { captureRemixErrorBoundaryError } from '@sentry/remix' export function GeneralErrorBoundary({ specialCases, }: { - specialCases?: { [key: number]: string } + specialCases?: { [key: number]: string | JSX.Element } }) { const error = useRouteError() console.error(error) @@ -12,16 +12,25 @@ export function GeneralErrorBoundary({ const isResponse = isRouteErrorResponse(error) let errorMessage = 'Something went wrong. Please, try again later.' const isClientError = isResponse && error.status >= 400 && error.status < 500 + const specialCase = isClientError ? specialCases?.[error.status] : undefined if (isResponse && isClientError) { - if (specialCases?.[error.status]) { - errorMessage = specialCases[error.status] + if (typeof specialCase === 'string') { + errorMessage = specialCase } else { errorMessage = error.statusText } } + let children: undefined | string | JSX.Element + if (typeof specialCase !== 'undefined' && typeof specialCase !== 'string') { + children = specialCase + } else { + children = isClientError + ? `${error.status} - ${errorMessage}` + : errorMessage + } return (
- {isClientError ? `${error.status} - ${errorMessage}` : errorMessage} + {children}
) } diff --git a/app/root.tsx b/app/root.tsx index b4e3c94..b2dc979 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -22,7 +22,8 @@ import { useLoaderData, } from '@remix-run/react' import cookie from 'cookie' -import { Index as Confetti } from 'confetti-react' +// import { Index as Confetti } from 'confetti-react' +// import { useWindowSize } from '@uidotdev/usehooks' import { getUser, useOptionalUser } from '#app/utils/use-user.tsx' import HamburgerMenu from '#app/components/hamburger-menu-lg.tsx' import { honeypot } from '#app/utils/honeypot.server.ts' @@ -203,25 +204,9 @@ function App() { const userData = useOptionalUser() - const [width, setWidth] = React.useState(0) - const [height, setHeight] = React.useState(0) + // const { width, height } = useWindowSize() - React.useEffect(() => { - setWidth(document.documentElement.clientWidth) - setHeight(window.innerHeight) - - const onResize = () => { - setWidth(document.documentElement.clientWidth) - setHeight(window.innerHeight) - } - - window.addEventListener('resize', onResize) - - return () => window.removeEventListener('resize', onResize) - }, []) - - const { confetti, ENV, theme, categories, pastLgHint } = - useLoaderData() + const { ENV, theme, categories, pastLgHint } = useLoaderData() const navbarOptions = [ ...categories.map(category => ({ ...category, @@ -257,19 +242,19 @@ function App() { if (!("ee_theme" in keys) || !("ee_past-lg" in keys)) { if (!("ee_theme" in keys)) { - const preferredTheme = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"; + const preferredTheme = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";path="/"; document.cookie = "ee_theme=" + preferredTheme + ";max-age=60 * 60 * 24 * 30"; } if (!("ee_past-lg" in keys)) { const pastLgBreakpoint = window.matchMedia("(max-width: 1100px)").matches; - document.cookie = "ee_past-lg=" + pastLgBreakpoint + ";max-age=60 * 60 * 24 * 30"; + document.cookie = "ee_past-lg=" + pastLgBreakpoint + ";max-age=60 * 60 * 24 * 30";path="/"; } location.reload(); } if(keys["ee_past-lg"] !== String(window.matchMedia("(max-width: 1100px)").matches)) { - document.cookie = "ee_past-lg=" + window.matchMedia("(max-width: 1100px)").matches + ";max-age=60 * 60 * 24 * 30"; + document.cookie = "ee_past-lg=" + window.matchMedia("(max-width: 1100px)").matches + ";max-age=60 * 60 * 24 * 30";path="/"; location.reload(); } `, @@ -348,14 +333,14 @@ function App() { /> - + /> */}