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);