Internationalization

Currently the frontend supports six instances: de, en, es, fr, hi, ta

In src/data you can find all the translations and the menu data for the instances. The index.ts files are seperated into four variables.

• instanceData: Strings for every page of the instance
• instanceLandingData: Strings for the landing page only
• serverSideStrings: Strings for the server only
• loggedInData: Strings for logged in users only

To add a new string, add it to the right variable inside the main language file src/data/en/index.ts. To access the strings in your components use the relevant hook (useInstanceData,useLoggedInData, …). When new strings (in en/index.ts) get merged into staging, they automatically get uploaded to our crowdin project and can then be translated there.

⚠️ Only edit src/data/en/index.ts. The index files for other languages are generated by crowdin. ⚠️

Example

import { useInstanceData } from '@/contexts/instance-context'

export function SerloBird() {
  const { strings } = useInstanceData()
  return <h1>{strings.header.slogan}</h1>
}

For strings with links for example you can use the replacePlaceholders helper with placeholders in this format %placeholder%:

import { useInstanceData } from '@/contexts/instance-context'
import { replacePlaceholders } from '@/helper/replace-placeholders'

function Sentence() {
  const { strings } = useInstanceData()
  return (
    <p>
      {replacePlaceholders(strings.example.sentence, {
        link: <a href="/whereto">{strings.example.link}</a>,
      })}
    </p>
  )
}