diff --git a/public/locales/en/layout/errors/not-found.json b/public/locales/en/layout/errors/not-found.json new file mode 100644 index 000000000..fde7fecb9 --- /dev/null +++ b/public/locales/en/layout/errors/not-found.json @@ -0,0 +1,5 @@ +{ + "title": "Page not found", + "text": "This page could not be found. The URL for this page may have expired, the URL is invalid or you do now have the required permissions to access this resource.", + "button": "Go to Home" +} \ No newline at end of file diff --git a/src/images/undraw_page_not_found_re_e9o6.svg b/src/images/undraw_page_not_found_re_e9o6.svg new file mode 100644 index 000000000..4b07e86c9 --- /dev/null +++ b/src/images/undraw_page_not_found_re_e9o6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 42576194f..fc9cfda5a 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,105 +1,54 @@ -import { - Button, - Container, - Group, - Text, - Title, - createStyles, - useMantineTheme, -} from '@mantine/core'; +import { Button, Center, Stack, Text, Title, createStyles } from '@mantine/core'; import { GetServerSidePropsContext } from 'next'; +import Head from 'next/head'; +import Image from 'next/image'; import Link from 'next/link'; -import React from 'react'; +import { useTranslation } from 'next-i18next'; +import pageNotFoundImage from '~/images/undraw_page_not_found_re_e9o6.svg'; +import { pageNotFoundNamespaces } from '~/tools/server/translation-namespaces'; import { getServerSideTranslations } from '../tools/server/getServerSideTranslations'; -const useStyles = createStyles((theme) => ({ - root: { - paddingTop: 80, - paddingBottom: 80, - }, - - inner: { - position: 'relative', - }, - - image: { - position: 'absolute', - top: 0, - right: 0, - left: 0, - zIndex: 0, - opacity: 0.75, - }, - - content: { - paddingTop: 220, - position: 'relative', - zIndex: 1, - - [theme.fn.smallerThan('sm')]: { - paddingTop: 120, - }, - }, - - title: { - fontFamily: `Greycliff CF, ${theme.fontFamily}`, - textAlign: 'center', - fontWeight: 900, - fontSize: 38, - - [theme.fn.smallerThan('sm')]: { - fontSize: 32, - }, - }, - - description: { - maxWidth: 540, - margin: 'auto', - marginTop: theme.spacing.xl, - marginBottom: `calc(${theme.spacing.xl} * 1.5)`, - }, -})); - -function Illustration(props: React.ComponentPropsWithoutRef<'svg'>) { - const theme = useMantineTheme(); - return ( - - - - ); -} - export default function Custom404() { const { classes } = useStyles(); + const { t } = useTranslation('layout/errors/not-found'); + return ( - -
- -
- Config not found - - The config you are trying to access does not exist. Please check the URL and try again. - - - - - - -
-
- +
+ + Page not found • Homarr + + + + {t('title')} + {t('text')} + + + +
); } + export async function getStaticProps({ req, res, locale }: GetServerSidePropsContext) { - const translations = await getServerSideTranslations(['common'], locale, undefined, undefined); + const translations = await getServerSideTranslations( + [...pageNotFoundNamespaces, 'common'], + locale, + req, + res + ); return { props: { ...translations, }, }; } + +const useStyles = createStyles(() => ({ + image: { + margin: '0 auto', + display: 'blcok', + }, +})); diff --git a/src/tools/server/translation-namespaces.ts b/src/tools/server/translation-namespaces.ts index 96f25690e..c12d02946 100644 --- a/src/tools/server/translation-namespaces.ts +++ b/src/tools/server/translation-namespaces.ts @@ -49,3 +49,5 @@ export const dashboardNamespaces = [ ]; export const loginNamespaces = ['authentication/login']; + +export const pageNotFoundNamespaces = ['layout/errors/not-found'];