diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-29 18:21:37 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-29 19:02:57 +0100 |
| commit | e4d5b8151802517b2943756fc0d09ffa95e2c4e2 (patch) | |
| tree | 9e99137a7b64ea7993a8311a7162336a551be8b2 /src/pages/404.tsx | |
| parent | 47b854de26dea24e7838fd0804df103dee99635f (diff) | |
chore: replace lingui functions with react-intl
Diffstat (limited to 'src/pages/404.tsx')
| -rw-r--r-- | src/pages/404.tsx | 62 |
1 files changed, 44 insertions, 18 deletions
diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 64c74ba..079dead 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,44 +1,70 @@ import { getLayout } from '@components/Layouts/Layout'; import PostHeader from '@components/PostHeader/PostHeader'; -import { seo } from '@config/seo'; -import { t, Trans } from '@lingui/macro'; +import { config } from '@config/website'; import styles from '@styles/pages/Page.module.scss'; import { NextPageWithLayout } from '@ts/types/app'; -import { loadTranslation } from '@utils/helpers/i18n'; +import { getIntlInstance, loadTranslation } from '@utils/helpers/i18n'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; import Link from 'next/link'; +import { FormattedMessage, useIntl } from 'react-intl'; + +const Error404: NextPageWithLayout = () => { + const intl = useIntl(); + + const pageTitle = intl.formatMessage( + { + defaultMessage: 'Error 404: Page not found - {websiteName}', + description: '404Page: SEO - Page title', + }, + { websiteName: config.name } + ); + const pageDescription = intl.formatMessage({ + defaultMessage: 'Page not found.', + description: '404Page: SEO - Meta description', + }); -const error404: NextPageWithLayout = () => { return ( <> <Head> - <title>{seo.error404.title}</title> - <meta name="description" content={seo.error404.description} /> + <title>{pageTitle}</title> + <meta name="description" content={pageDescription} /> </Head> <div className={`${styles.article} ${styles['article--no-comments']}`}> - <PostHeader title={t`Page not found`} /> + <PostHeader + title={intl.formatMessage({ + defaultMessage: 'Page not found', + description: '404Page: page title', + })} + /> <div className={styles.body}> - <Trans> - Sorry, it seems that the page you are looking for does not exist. - </Trans>{' '} - <Trans> - If you think this path should work, feel free to{' '} - <Link href="/contact/">contact me</Link> with the necessary - information so that I can fix the problem. - </Trans> + <FormattedMessage + defaultMessage="Sorry, it seems that the page your are looking for does not exist. If you think this path should work, feel free to <link>contact me</link> with the necessary information so that I can fix the problem." + description="404Page: page body" + values={{ + link: (chunks: string) => ( + <Link href="/contact/"> + <a>{chunks}</a> + </Link> + ), + }} + /> </div> </div> </> ); }; -error404.getLayout = getLayout; +Error404.getLayout = getLayout; export const getStaticProps: GetStaticProps = async ( context: GetStaticPropsContext ) => { - const breadcrumbTitle = t`Error`; + const intl = await getIntlInstance(); + const breadcrumbTitle = intl.formatMessage({ + defaultMessage: 'Error 404', + description: '404Page: breadcrumb item', + }); const { locale } = context; const translation = await loadTranslation(locale); @@ -51,4 +77,4 @@ export const getStaticProps: GetStaticProps = async ( }; }; -export default error404; +export default Error404; |