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/blog | |
| parent | 47b854de26dea24e7838fd0804df103dee99635f (diff) | |
chore: replace lingui functions with react-intl
Diffstat (limited to 'src/pages/blog')
| -rw-r--r-- | src/pages/blog/index.tsx | 78 |
1 files changed, 63 insertions, 15 deletions
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<BlogPageProps> = ({ fallback }) => { + const intl = useIntl(); const lastPostRef = useRef<HTMLSpanElement>(null); const router = useRouter(); @@ -76,21 +76,39 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ 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 <Spinner />; return <PostsList ref={lastPostRef} data={data} showYears={true} />; }; - 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<BlogPageProps> = ({ fallback }) => { '@graph': [webpageSchema, blogSchema], }; + const title = intl.formatMessage({ + defaultMessage: 'Blog', + description: 'BlogPage: page title', + }); + return ( <> <Head> - <title>{seo.blog.title}</title> - <meta name="description" content={seo.blog.description} /> + <title>{pageTitle}</title> + <meta name="description" content={pageDescription} /> <meta property="og:url" content={`${pageUrl}`} /> <meta property="og:type" content="website" /> <meta property="og:title" content={title} /> - <meta property="og:description" content={seo.blog.description} /> + <meta property="og:description" content={pageDescription} /> <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} @@ -146,13 +169,34 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => { isDisabled={isLoadingMore} clickHandler={loadMorePosts} position="center" - >{t`Load more?`}</Button> + > + {intl.formatMessage({ + defaultMessage: 'Load more?', + description: 'BlogPage: load more text', + })} + </Button> </> )} </div> - <Sidebar position="right" title={t`Filter by`}> - <ThematicsList title={t`Thematics`} /> - <TopicsList title={t`Topics`} /> + <Sidebar + position="right" + title={intl.formatMessage({ + defaultMessage: 'Filter by:', + description: 'BlogPage: sidebar title', + })} + > + <ThematicsList + title={intl.formatMessage({ + defaultMessage: 'Thematics', + description: 'BlogPage: thematics list widget title', + })} + /> + <TopicsList + title={intl.formatMessage({ + defaultMessage: 'Topics', + description: 'BlogPage: topics list widget title', + })} + /> </Sidebar> </article> </> @@ -164,7 +208,11 @@ Blog.getLayout = getLayout; export const getStaticProps: GetStaticProps = async ( context: GetStaticPropsContext ) => { - const breadcrumbTitle = t`Blog`; + const intl = await getIntlInstance(); + const breadcrumbTitle = intl.formatMessage({ + defaultMessage: 'Blog', + description: 'BlogPage: breadcrumb item', + }); const data = await getPublishedPosts({ first: config.postsPerPage }); const { locale } = context; const translation = await loadTranslation(locale); |