From e4d5b8151802517b2943756fc0d09ffa95e2c4e2 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 29 Jan 2022 18:21:37 +0100 Subject: chore: replace lingui functions with react-intl --- src/utils/helpers/i18n.ts | 23 ++++++++++++++++++++++- src/utils/helpers/prism.ts | 22 +++++++++++++++++----- 2 files changed, 39 insertions(+), 6 deletions(-) (limited to 'src/utils/helpers') 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} The translated strings. */ export async function loadTranslation( currentLocale: string | undefined ): Promise { - 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 {>} The Intl object. + */ +export async function getIntlInstance(): Promise> { + 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); }); }; -- cgit v1.2.3