Skip to main content

🌍 i18n AKA Internacionalization

Configure your site​

info

::: (this should be already done, look inside docusaurus-config.js)

i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es'],
    localeConfigs: {
      en: {
        label: 'English',
      },
      es: {
        label: 'Español',
      },
    },
  },

Theme configuration​

This will make a translation / language chooser selection menu appear in the NavBar.

{
  type: 'localeDropdown',
  position: 'left',
},

Start your site​

info

::: Switching between languages Won't work on development builds. You need to either launch a development build stating the language you want to use or a production build

We can only see one language during development. To check the Spanish translations and have hot-reload of changes:

npm run start -- --locale es

Use the translation APIs​

Needed if you want to also translate parts of the interface.

import Translate, {translate} from '@docusaurus/Translate';

<main>
  <div className={clsx('col col--4', styles.feature)}>
    <div className="text--center">
      <img className={styles.featureImage} src='img/undraw_docusaurus_mountain.svg' alt="Easy to Use"/>
      <h3><Translate description="The homepage message to ask the user to visit my blog">Easy to Use</Translate>
      </h3>
      <p>
        <Translate>
          Docusaurus was designed from the ground up to be easily installed and
          used to get your website up and running quickly.
        </Translate>
      </p>
    </div>
  </div>
</main>

Translate JSON files​

Only if we have these files

npm run write-translations -- --locale es

Translate Markdown files​

Copy over the English docs that are in the /docs folder over to i18n/es/docusaurus-plugin-content-docs/current for es (change that depending on the language)

mkdir -p i18n/es/docusaurus-plugin-content-docs/current
cp -r docs/** i18n/es/docusaurus-plugin-content-docs/current

To do the actual translation, copy the raw markdown and paste it in chatgpt asking for the target language. Then copy the response and paste it back. Works like a charm.

Docusaurus official tutorial​

https://docusaurus.io/docs/next/i18n/tutorial