UI Case Study: TinaCMS & i18n

This is a case study for an i18n localization feature that currently doesn't exist in TinaCMS as of November 12, 2022

Adding in localization on static sites is pretty easy to do by using a JSON file with each language you want to support. A basic example might look like:

{
  "homepage": {
    "title": {
      "en": "Welcome to my site",
      "fr": "Bienvenue sur mon site"
    }
  }
}

Another example might be to hold different JSON files for each language, such as translation-en.json and translation-fr.json. and then import whichever one you need using javascript.

Doing this with a CMS becomes a lot more difficult since now you have to account for the CMS's way of saving copies of strings for different languages, and figure out how to import that in.

With TinaCMS's GraphQL layer, we could request a language by default (or send the browser's language setting in the initial request if using SSR), and have GraphQL return the correct language. Then using a language toggle on the client site, the GraphQL calls could query again and pull the new content in the user's requested language.

This case study though will be focused on how localization settings could be added to the TinaCMS Admin panel. We'll start with creating a new setting to enable localization. This might be found in the Configuration page of the site settings.

Checking this new option will provide us with a new multi-select dropdown. With this, we'll be able to select which languages we would like to support. The system could automatically detect the browser's language and select that one first. In my case, en will be the default.

Now that you have chosen which languages you want to support, we can go to our site editor your-site.com/admin. Expand the view to full screen, and you will see a new dropdown option in the top right.

When you click on this new dropdown, you'll be presented with the list of languages you selected back in the admin panel. Whenever you select one, the GraphQL layer will refresh the content and pull in the specific language, like so:

Something to note: This is not auto-translating the content. Auto translation could be an option on a paid plan since using translation APIs can be expensive. If you haven't previously set the french content in the example above, the input fields would be blank, and then you could fill in your own content.

This is just an example of what localization could look like using TinaCMS, and could prove very beneficial to larger scale sites that need to support multiple languages.

Code Example

Inside your codebase, you can create your language toggle in the UI, and then update your content to pull from the newest MDX content that comes from TinaCMS.

const { data, query, variables } = await client.queries.documentQuery({
  relativePath: `${params.filename}.mdx`,
  language: "new-language-key-here"
});

return {
  props: {
    variables,
    data,
    query,
  },
};