chore(baseline): handle baseline translation manually

I cannot use formatjs to translate the website baseline since I need
an async function to load the message. If I use the getIntlInstance
helper outside NextJS, webpack is complaining about fs and path.

4 files changed, 19 insertions, 5 deletions

diff --git a/src/components/Branding/Branding.tsx b/src/components/Branding/Branding.tsx
index adefbca..317a8f3 100644
--- a/src/components/Branding/Branding.tsx
+++ b/src/components/Branding/Branding.tsx
@@ -3,6 +3,7 @@ import { settings } from '@utils/config';
 import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { ReactElement } from 'react';
 import { useIntl } from 'react-intl';
 import { Person, WithContext } from 'schema-dts';
@@ -13,6 +14,7 @@ type BrandingReturn = ({ isHome }: { isHome: boolean }) => ReactElement;
 
 const Branding: BrandingReturn = ({ isHome = false }) => {
   const intl = useIntl();
+  const { locale } = useRouter();
   const TitleTag = isHome ? 'h1' : 'p';
 
   const schemaJsonLd: WithContext<Person> = {
@@ -21,7 +23,9 @@ const Branding: BrandingReturn = ({ isHome = false }) => {
     '@id': `${settings.url}/#branding`,
     name: settings.name,
     url: settings.url,
-    jobTitle: settings.baseline,
+    jobTitle: locale?.startsWith('en')
+      ? settings.baseline.en
+      : settings.baseline.fr,
     image: photo.src,
     subjectOf: { '@id': `${settings.url}` },
   };
@@ -60,7 +64,11 @@ const Branding: BrandingReturn = ({ isHome = false }) => {
             <a className={styles.link}>{settings.name}</a>
           </Link>
         </TitleTag>
-        <p className={styles.job}>{settings.baseline}</p>
+        <p className={styles.job}>
+          {locale?.startsWith('en')
+            ? settings.baseline.en
+            : settings.baseline.fr}
+        </p>
       </div>
     </>
   );
diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index d074b68..420b37a 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -17,6 +17,7 @@ const Layout = ({
   isHome?: boolean;
 }) => {
   const intl = useIntl();
+  const { locale } = useRouter();
   const ref = useRef<HTMLSpanElement>(null);
   const { asPath } = useRouter();
 
@@ -29,7 +30,9 @@ const Layout = ({
     '@id': `${settings.url}`,
     '@type': 'WebSite',
     name: settings.name,
-    description: settings.baseline,
+    description: locale?.startsWith('en')
+      ? settings.baseline.en
+      : settings.baseline.fr,
     url: settings.url,
     author: { '@id': `${settings.url}/#branding` },
     copyrightYear: Number(settings.copyright.startYear),
diff --git a/src/utils/config.ts b/src/utils/config.ts
index 1c227cc..dc009d9 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -1,6 +1,9 @@
 export const settings = {
   name: 'Armand Philippot',
-  baseline: 'Front-end developer',
+  baseline: {
+    en: 'Front-end developer',
+    fr: 'Intégrateur web',
+  },
   copyright: {
     startYear: '2012',
     endYear: new Date().getFullYear(),
diff --git a/src/utils/helpers/rss.ts b/src/utils/helpers/rss.ts
index 55b009a..305c6e7 100644
--- a/src/utils/helpers/rss.ts
+++ b/src/utils/helpers/rss.ts
@@ -27,7 +27,7 @@ export const generateFeed = async () => {
     link: websiteUrl,
   };
   const copyright = `${settings.name} CC BY SA ${settings.copyright.startYear} - ${settings.copyright.endYear}`;
-  const title = `${settings.name} | ${settings.baseline}`;
+  const title = `${settings.name} | ${settings.baseline.fr}`;
 
   const feed = new Feed({
     author,