i18n

I18n is currently in private beta. If you'd like to test out these features reach out over live chat.

Content in TakeShape can be localized into different languages and countries. Locales represent a combination of a language and optionally a country. Languages are represented by ISO 639-1 two-letter codes. Countries are represented by ISO 3166-1 alpha-2  two letter codes. The default locale that all projects start in is English - en.

Configure Locales In Project Settings

A Single Locale

Developer, Hobby, and Starter plans come with the ability to change the default locale. 

Multiple Locales

"Professional" plans and above have the ability to configure multiple locales. New locales can be added and removed.

Changing A Project's Default Locale

WARNING!!! THIS ACTION CAN BE RISKY!!!

There are 2 scenarios when changing a project's locale is appropriate.

1. At the start of a project to establish the default locale for which future content will be entered into the project.
2. To correct a situation where content in a single locale was created and the default locale is being changed to appropriately match the existing content.

Changing your default locale will relabel the default locale from the current locale code to the new locale code.

Existing content in currently locale will appear in the new locale. However, existing non-default locale translations WILL be preserved. When a non-default locale translation is preserved the original locale content will be lost. All content in the current default locale will be cleared.

This action is IRREVERSIBLE and should only be taken with a full understanding of how this change will impact the content of this project.

Configure Localized Content Types Fields 

Individual fields can be configured to be localized or not via a checkbox. Repeater fields have a special "Share items between locales" checkbox, that we recommend keeping checked on. Sharing the repeater between locales keeps the number and order for repeater items the same across locales.

Configuring Localization in the content type

Creating content in each locale

There is a locale chooser dropdown in the sidebar of content entries. Content must be saved in the default locale in order for additional locale options to appear. 

Querying Locales With The GraphQL API

GraphQL queries can be written like this:

{
  getLocaleExampleList(locale: "es-es") {
    items {
      ...
    }
  }
}

Or like this:

withContext(locale: "fr", languageFallback: false) {
  getLocaleExampleList {
    items {
      ...
    }
  }
}

I18N Support In The TakeShape Static Site Generator

**Coming Soon - TakeShape SSG will support new i18n API features.**

  • Locales are configured tsg.yml
  • GraphQL queries are automatically wrapped in the locale config query from the SSG

The current language-country code string is passed to the template context

# tsg.yml
locales: 
    en-us:
        pathPrefix: ''
        dates:
            tz: America/New_York
            format: LLL
    fr:
        pathPrefix: 'fr'
        dates:
            tz: France/Paris
            format: LLL

Date Filters

The date filter automatically passes in current locale being generated unless the locale is specified in the filter. {{ date | date({format: 'LLL', tz: 'America/Los_Angeles', locale: 'fr') }}

Context

{{ locale }} # “en-us”

i18n filter

The i18n helper allows internationalization of template strings through the use of resource bundles

i18n for static content that is a part of the template

{{ ‘greetings’ | i18n }} or {{ i18n(‘greetings’) }}

  • Automatically passes in the locale
  • Optional argument to take a locale

Example resource bundles

# en-us.yml
greetings: Hello


# fr.yml
greetings: Bonjour

Join us

Interested in joining the team as coworker or investor?

contact@takeshape.com