UI Case Study: TinaCMS & i18n
Tags: casestudy, tinacms, localization, beginners
Published: 2022-11-12 19:16:40

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:

```json
{
  "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.

![Enabling localization example inside TinaCMS's admin panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m91dt91gfph1opfpytbb.png)

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.

![Select which languages you'd like to support](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x67tmsjd85te05u9qgpg.png)

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. 


![Dashboard now has a new language dropdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05mxp5p802vfmfjrjc3v.png)

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:


![A dropdown showing the list of languages that you previously saved in your admin panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ar5efvg5mhc54cqy5dk8.png)


![TinaCMS content page reflecting the new content that you had.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98i1odfulyd93pscmwq5.png)

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.

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

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