Support i18n

[djyde]

This PR add i18n support to Follow. (Currently I only test on Electron app), which is powered by i18next and react-i18next.

What new in UI

Added a language selector on the general setting page:

How it works

All locales files are on locales/ path. I added en.json and zh_CN.json.

The i18next core function is on shared/src/i18n.ts. This file import all the locales from locale json file.

Then on the top level of the entire app (aka renderer/src/main.tsx) just simply import the i18n.ts to load the locales.

How to use in component

just use useTranslation, e.g. :

function Component() {
  const { t } = useTrasnlation()

  return <p>t("settings.general.rebuild_database.label")</p>
}

How to progressivly add translation:

I recommend using Cursor. Open the React component file, open chat, just tell it "Extract all text to en.json". It will do all the things for you:

Otherwise manually extract them file by file.

BTW I could create a new PR to do it after this PR being merged.

[vercel]

@djyde is attempting to deploy a commit to the RSS3 Team on Vercel.

A member of the Team first needs to authorize it.

[Innei]

@djyde Thanks for the contribution!

But I found some problems, like t no intelligence in the vscode.

[Innei]

Another problem is that this implementation only works for the web and does not cover electron.

We need to set the language of the electron app, not just the renderer.

The electron i18n logic maybe like this:

lanuage selector (renderer) -> app lanuage (main) -> callback renderer -> re-fetch app language(renderer) -> set ui language(renderer)

[djyde]

Another problem is that this implementation only works for the web and does not cover electron.

We need to set the language of the electron app, not just the renderer.

The electron i18n logic maybe like this:

lanuage selector (renderer) -> app lanuage (main) -> callback renderer -> re-fetch app language(renderer) -> set ui language(renderer)

Where to save the language in main process?

[Innei]

Another problem is that this implementation only works for the web and does not cover electron.
We need to set the language of the electron app, not just the renderer.
The electron i18n logic maybe like this:

lanuage selector (renderer) -> app lanuage (main) -> callback renderer -> re-fetch app language(renderer) -> set ui language(renderer)

Where to save the language in main process?

I just researched other electron apps and most of them ignore this issue, testing on Discord, Slack, AFFiNE. Only Slack synchronizes the language between renderer and main, while the others only do i18n for the renderer, and main only based on the system language.

[Innei]

So for now we don't need to be concerned about this, I'll take the time to address it subsequently

[Innei]

@djyde I fixed TypeScript support for i18n and added DX HMR support.

Once testing is complete, it will be merged