chore: replace lingui functions with react-intl

2 files changed, 39 insertions, 6 deletions

diff --git a/src/utils/helpers/i18n.ts b/src/utils/helpers/i18n.ts
index dd010c4..16c83f4 100644
--- a/src/utils/helpers/i18n.ts
+++ b/src/utils/helpers/i18n.ts
@@ -1,18 +1,22 @@
 import { config } from '@config/website';
+import { createIntl, createIntlCache, IntlShape } from '@formatjs/intl';
 import { readFile } from 'fs/promises';
 import path from 'path';
 
 type Messages = { [key: string]: string };
 
+export const defaultLocale = config.locales.defaultLocale;
+
 /**
  * Load the translation for the provided locale.
+ *
  * @param currentLocale - The current locale.
  * @returns {Promise<Messages>} The translated strings.
  */
 export async function loadTranslation(
   currentLocale: string | undefined
 ): Promise<Messages> {
-  const locale: string = currentLocale || config.locales.defaultLocale;
+  const locale: string = currentLocale || defaultLocale;
 
   const languagePath = path.join(process.cwd(), `lang/${locale}.json`);
 
@@ -26,3 +30,20 @@ export async function loadTranslation(
     throw error;
   }
 }
+
+/**
+ * Create an Intl object to be used outside components.
+ *
+ * @returns {<Promise<IntlShape<string>>} The Intl object.
+ */
+export async function getIntlInstance(): Promise<IntlShape<string>> {
+  try {
+    const cache = createIntlCache();
+    const messages = await loadTranslation(defaultLocale);
+
+    return createIntl({ locale: defaultLocale, messages }, cache);
+  } catch (error) {
+    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);
   });
 };