Localization

The whole backend project has a custom localization system integrated.

Sanity provides a plugin for localization, but after some examining, we determined it was not going to work properly with our islands system, and that’s why we came up with the Localized Islands concept.

Each island that contains text inputs can receive a localized property in their payload. If they do, they will then renderize the localized island instead of the regular island, meaning instead of doing defineField directly with their properties, we pass through localized_island/index.js to add the extra language fields we’ll need:

import {defineField} from 'sanity'
import LocalizedIsland from './LocalizedIsland'
import { CustomSlug } from '@attributes/settings/customSlug'
import { languages } from '../utils/languages'

export const defineLocalized = (payload) => {
  const {name, title, group, hidden, description, options, type, of, fields, validation, rows, max, required, section_slug, isSlug = false, initialValue, validatedLanguages = null} =
    payload
  const localizedFields = []
  languages.map((lang) => {
    localizedFields.push({
      name: lang.id,
      title: lang.title,
      type: type,
      ...(of && {of}),
      ...(fields && {fields}),
      options,
      validation : validatedLanguages ? (validatedLanguages.includes(lang.id) && validation) : (lang.id == 'en' && validation),
      rows,
      max,
      required,
    })
  })

  return defineField({
      name,
      type: 'object',
      title,
      group,
      hidden,
      description,
      initialValue,
      validation,
      options: {
        ...options,
        isFile: type === 'file',
        isImage: type === 'image',
        isSlug,
        collapsed: false,
        collapsible: false
      },
      fields: localizedFields,
      components: {
        input: isSlug ? (props) => CustomSlug({...props, localized: true, section_slug}) : LocalizedIsland,
      },
    })

}

This goes through the whole array of languages available in the project, gets the properties from the island, and creates an object for each text field inside the island where instead of having only one text input, we then have one for each language, so a regular title input would go from this:

title: 'This is a title'

To this:

title: {
    en: 'This is a title',
    es: 'Esto es un título',
    it: ...
}

We do need to be careful and reason before we tell an island to be localized or not, since we can end up with fields that we do not want.

For instance, if we tell an asset island to be localized, we will have one image / video per language, which is not usually what we want. If, instead, we tell it to not be, we will have one single image / video but a localized alt text, for instance.

Some islands are not meant to be localized, such as boolean, option or repeater.

Translation

Translation in the backend is managed directly via AI. Go here to check how we integrated this in the project.