From e4d5b8151802517b2943756fc0d09ffa95e2c4e2 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 29 Jan 2022 18:21:37 +0100 Subject: chore: replace lingui functions with react-intl --- src/pages/404.tsx | 62 +++++++++++++++++++-------- src/pages/article/[slug].tsx | 6 ++- src/pages/blog/index.tsx | 78 ++++++++++++++++++++++++++------- src/pages/contact.tsx | 95 ++++++++++++++++++++++++++++++++--------- src/pages/cv.tsx | 55 +++++++++++++++++++----- src/pages/index.tsx | 69 ++++++++++++++++++++++++------ src/pages/mentions-legales.tsx | 35 +++++++++++---- src/pages/projets.tsx | 30 ++++++++++--- src/pages/recherche/index.tsx | 68 +++++++++++++++++++++++------ src/pages/sujet/[slug].tsx | 20 +++++++-- src/pages/thematique/[slug].tsx | 20 +++++++-- 11 files changed, 424 insertions(+), 114 deletions(-) (limited to 'src/pages') 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 ( <> - {seo.error404.title} - + {pageTitle} +
- +
- - Sorry, it seems that the page you are looking for does not exist. - {' '} - - If you think this path should work, feel free to{' '} - contact me with the necessary - information so that I can fix the problem. - + ( + + {chunks} + + ), + }} + />
); }; -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; diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx index ce9c22b..8668a66 100644 --- a/src/pages/article/[slug].tsx +++ b/src/pages/article/[slug].tsx @@ -18,6 +18,7 @@ import { useRouter } from 'next/router'; import Prism from 'prismjs'; import { ParsedUrlQuery } from 'querystring'; import { useEffect } from 'react'; +import { useIntl } from 'react-intl'; import { Blog, BlogPosting, Graph, WebPage } from 'schema-dts'; const SingleArticle: NextPageWithLayout = ({ post }) => { @@ -45,6 +46,7 @@ const SingleArticle: NextPageWithLayout = ({ post }) => { wordsCount: info.wordsCount, }; + const intl = useIntl(); const router = useRouter(); const locale = router.locale ? router.locale : config.locales.defaultLocale; const articleUrl = `${config.url}${router.asPath}`; @@ -55,8 +57,8 @@ const SingleArticle: NextPageWithLayout = ({ post }) => { }); useEffect(() => { - translateCopyButton(locale); - }, [locale]); + translateCopyButton(locale, intl); + }, [intl, locale]); const webpageSchema: WebPage = { '@id': `${articleUrl}`, diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index 8e42e02..9a86d9f 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -6,22 +6,22 @@ import PostsList from '@components/PostsList/PostsList'; import Sidebar from '@components/Sidebar/Sidebar'; import Spinner from '@components/Spinner/Spinner'; import { ThematicsList, TopicsList } from '@components/Widgets'; -import { seo } from '@config/seo'; import { config } from '@config/website'; -import { t } from '@lingui/macro'; import { getPublishedPosts } from '@services/graphql/queries'; import styles from '@styles/pages/Page.module.scss'; import { NextPageWithLayout } from '@ts/types/app'; import { BlogPageProps, PostsList as PostsListData } from '@ts/types/blog'; -import { loadTranslation } from '@utils/helpers/i18n'; +import { getIntlInstance, loadTranslation } from '@utils/helpers/i18n'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { useEffect, useRef, useState } from 'react'; +import { useIntl } from 'react-intl'; import { Blog as BlogSchema, Graph, WebPage } from 'schema-dts'; import useSWRInfinite from 'swr/infinite'; const Blog: NextPageWithLayout = ({ fallback }) => { + const intl = useIntl(); const lastPostRef = useRef(null); const router = useRouter(); @@ -76,21 +76,39 @@ const Blog: NextPageWithLayout = ({ fallback }) => { }; const getPostsList = () => { - if (error) return t`Failed to load.`; + if (error) + return intl.formatMessage({ + defaultMessage: 'Failed to load.', + description: 'BlogPage: failed to load text', + }); if (!data) return ; return ; }; - const title = t`Blog`; + const pageTitle = intl.formatMessage( + { + defaultMessage: 'Blog: development, open source - {websiteName}', + description: 'BlogPage: SEO - Page title', + }, + { websiteName: config.name } + ); + const pageDescription = intl.formatMessage( + { + defaultMessage: + "Discover {websiteName}'s writings. He talks about web development, Linux and open source mostly.", + description: 'BlogPage: SEO - Meta description', + }, + { websiteName: config.name } + ); const pageUrl = `${config.url}${router.asPath}`; const webpageSchema: WebPage = { '@id': `${pageUrl}`, '@type': 'WebPage', breadcrumb: { '@id': `${config.url}/#breadcrumb` }, - name: seo.blog.title, - description: seo.blog.description, + name: pageTitle, + description: pageDescription, inLanguage: config.locales.defaultLocale, reviewedBy: { '@id': `${config.url}/#branding` }, url: `${config.url}`, @@ -115,15 +133,20 @@ const Blog: NextPageWithLayout = ({ fallback }) => { '@graph': [webpageSchema, blogSchema], }; + const title = intl.formatMessage({ + defaultMessage: 'Blog', + description: 'BlogPage: page title', + }); + return ( <> - {seo.blog.title} - + {pageTitle} + - +