This document outlines the different steps and tools required to perform translation for our web project.
<aside> 💡
This documentation is a work in progress, as translation support in Owncast is still brand new. Anybody who is familiar with translations or performing translations should help make this document better to assist other people in helping in the future.
</aside>
Because the Owncast web application is a statically exported site (there is no backend rendering dynamic HTML) it creates a challenge for localization where it must be all handled client-side, as a fully statically exported and rendered web app.
We use the following tools to accomplish this.
| Tool | Description |
|---|---|
| i18next | Used for parsing and exporting translatable strings from our source code. |
| next-export-i18n | Used to handle localization for Next.js statically exported sites. |
| Cowdin | Web service used for performing the actual translation of strings. Users can create accounts to assist in the translation process. |
All strings and phrases in the application need to be wrapped with the t(<string>) function. This is done with the next-export-i18n library.
Without this work, we don’t know what words should be translated, and no actual translation work can be performed. You may want to help to translate words to another language, but if this work isn’t done first, then the translation can’t be done.
import { useTranslation } from 'next-export-i18n'; on the top of the file with the other imports.FC), not outside the component, add the hook: const { t } = useTranslation();. It's likely you'll see other hooks setup there as well, such as useEffect.t() function will enable that string to be translated.