Skip to content

Adding a new language support

Pablo Costa edited this page Jan 25, 2024 · 7 revisions

This PR #2562 "Support JA locale" works as an example.

Follow these steps in order to add a new language to the site:

  • Add the new language code to the available languages .env variable GATSBY_AVAILABLE_LANGUAGES. E.g.:
GATSBY_AVAILABLE_LANGUAGES=en,es,fr,ja
  • Add language configuration to the i18n config file site/gatsby-site/i18n/config.json E.g.:
  {
    "code": "ja",
    "hrefLang": "ja",
    "name": "Japanese",
    "localName": "日本語",
    "langDir": "ltr",
    "dateFormat": "YYYY/MM/DD"
  }
  • Add all JSON files with the translations under the folder site/gatsby-site/i18n/locales/[language code]. E.g: site/gatsby-site/i18n/locales/ja/account.json

  • Add the new language to the site language switcher. Change site/gatsby-site/src/components/i18n/LanguageSwitcher.js code adding the new language to this statement:

const isBetaLocale = ({ code }) => code === 'fr' || code === 'ja';
  • Add the Atlas rules file for the translations/reports_[language code] collection. Take a look at this example file. E.g.:
site/realm/data_sources/mongodb-atlas/translations/reports_ja/rules.json
  • Add Gatsby type definition to this file: site/gatsby-site/typeDefs.js. E.g.:
  type mongodbTranslationsReportsJa implements Node {
    title: String
    text: String
    report_number: Int
  }
  • Add Sorting option to Discover page for each field: site/gatsby-site/src/components/discover/SORTING_LISTS.js. E.g.:
value_ja: 'instant_search-ja_epoch_incident_date_desc',
  • Add report translation query on site/gatsby-site/src/graphql/reports.js. E.g.:
  translations_ja: translations(input: "ja") {
    title
    text
  }
  • Add Blog posts translations under folder: site/gatsby-site/blog. E.g.: site/gatsby-site/blog/incident-report-2023-january/index.ja.mdx. This won't be mandatory after this issue is resolved.

  • Run the tests. If tests fail, take a look at this PR folder for reference.