2 files changed, 44 insertions, 69 deletions

diff --git a/src/utils/helpers/i18n.ts b/src/utils/helpers/i18n.ts
index 4439906..16c83f4 100644
--- a/src/utils/helpers/i18n.ts
+++ b/src/utils/helpers/i18n.ts
@@ -1,86 +1,49 @@
-import { messages as messagesEn } from '@i18n/en/messages.js';
-import { messages as messagesFr } from '@i18n/fr/messages.js';
-import { i18n, Messages } from '@lingui/core';
-import { en, fr } from 'make-plural/plurals';
+import { config } from '@config/website';
+import { createIntl, createIntlCache, IntlShape } from '@formatjs/intl';
+import { readFile } from 'fs/promises';
+import path from 'path';
 
-type Catalog = {
-  messages: Messages;
-};
+type Messages = { [key: string]: string };
 
-export const locales = {
-  en: 'English',
-  fr: 'Français',
-};
-
-export const defaultLocale = 'fr';
+export const defaultLocale = config.locales.defaultLocale;
 
 /**
- * Load the translation with the correct method depending on environment.
+ * Load the translation for the provided locale.
  *
- * @param {string} locale - The current locale.
- * @returns {Promise<Messages>} The translated messages.
+ * @param currentLocale - The current locale.
+ * @returns {Promise<Messages>} The translated strings.
  */
-export async function loadTranslation(locale: string): Promise<Messages> {
-  let catalog: Catalog;
-
-  try {
-    if (process.env.NODE_ENV === 'production') {
-      catalog = await import(`src/i18n/${locale}/messages`);
-    } else {
-      catalog = await import(`@lingui/loader!src/i18n/${locale}/messages.po`);
-    }
+export async function loadTranslation(
+  currentLocale: string | undefined
+): Promise<Messages> {
+  const locale: string = currentLocale || defaultLocale;
 
-    return catalog.messages;
-  } catch (error) {
-    console.error('Error while loading translation.');
-    throw error;
-  }
-}
+  const languagePath = path.join(process.cwd(), `lang/${locale}.json`);
 
-/**
- * Init lingui.
- *
- * @param {string} locale - The locale to activate.
- * @param {Messages} [messages] - The compiled translation.
- */
-export function initLingui(locale: string, messages?: Messages) {
   try {
-    i18n.loadLocaleData({
-      en: { plurals: en },
-      fr: { plurals: fr },
-    });
-
-    if (messages) {
-      i18n.load(locale, messages);
-    } else {
-      i18n.load({
-        en: messagesEn,
-        fr: messagesFr,
-      });
-    }
-
-    i18n.activate(locale, Object.keys(locales));
+    const contents = await readFile(languagePath, 'utf8');
+    return JSON.parse(contents);
   } catch (error) {
-    console.error('Error while Lingui init.');
+    console.error(
+      'Error: Could not load compiled language files. Please run `yarn run i18n:compile` first."'
+    );
     throw error;
   }
 }
 
 /**
- * Activate the given locale.
+ * Create an Intl object to be used outside components.
  *
- * @param {string} locale - The locale to activate.
- * @param {Messages} messages - The compiled translation.
+ * @returns {<Promise<IntlShape<string>>} The Intl object.
  */
-export function activateLocale(currentLocale: string, messages: Messages) {
-  const locale: string = Object.keys(locales).includes(currentLocale)
-    ? currentLocale
-    : defaultLocale;
-
+export async function getIntlInstance(): Promise<IntlShape<string>> {
   try {
-    initLingui(locale, messages);
+    const cache = createIntlCache();
+    const messages = await loadTranslation(defaultLocale);
+
+    return createIntl({ locale: defaultLocale, messages }, cache);
   } catch (error) {
-    console.error(`Error while activating ${currentLocale}`);
+    console.error('Error: Could not create an Intl instance.');
     throw error;
   }
 }
diff --git a/src/utils/helpers/prism.ts b/src/utils/helpers/prism.ts
index 86c8f7d..7f10dc9 100644
--- a/src/utils/helpers/prism.ts
+++ b/src/utils/helpers/prism.ts
@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { IntlShape } from 'react-intl';
 
 /**
  * Check if the current block has a defined language.
@@ -39,13 +39,25 @@ export const addPrismClasses = () => {
 /**
  * Translate the PrismJS Copy to clipboard button.
  */
-export const translateCopyButton = (locale: string) => {
+export const translateCopyButton = (locale: string, intl: IntlShape) => {
   const articles = document.getElementsByTagName('article');
+  const copyText = intl.formatMessage({
+    defaultMessage: 'Copy',
+    description: 'Prism: copy button text (no clicked)',
+  });
+  const copiedText = intl.formatMessage({
+    defaultMessage: 'Copied!',
+    description: 'Prism: copy button text (clicked)',
+  });
+  const errorText = intl.formatMessage({
+    defaultMessage: 'Use Ctrl+c to copy',
+    description: 'Prism: error text',
+  });
 
   Array.from(articles).forEach((article) => {
     article.setAttribute('lang', locale);
-    article.setAttribute('data-prismjs-copy', t`Copy`);
-    article.setAttribute('data-prismjs-copy-success', t`Copied!`);
-    article.setAttribute('data-prismjs-copy-error', t`Use Ctrl+c to copy`);
+    article.setAttribute('data-prismjs-copy', copyText);
+    article.setAttribute('data-prismjs-copy-success', copiedText);
+    article.setAttribute('data-prismjs-copy-error', errorText);
   });
 };