docs: add i18n guide for contributing new languages to README
This commit is contained in:
34
README.md
34
README.md
@@ -125,6 +125,40 @@ graph TD
|
|||||||
4. **Messages** — Messages stream in via WebSocket frames; the hook assembles partial chunks into complete messages
|
4. **Messages** — Messages stream in via WebSocket frames; the hook assembles partial chunks into complete messages
|
||||||
5. **Send** — User input (+ optional file attachments) is sent as a JSON frame over the WebSocket
|
5. **Send** — User input (+ optional file attachments) is sent as a JSON frame over the WebSocket
|
||||||
|
|
||||||
|
## 🌐 Adding a Language
|
||||||
|
|
||||||
|
PinchChat uses a zero-dependency i18n system. Adding a new language takes ~5 minutes:
|
||||||
|
|
||||||
|
1. **Open `src/lib/i18n.ts`** and duplicate the `en` object with your locale code:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const de: typeof en = {
|
||||||
|
'login.title': 'PinchChat',
|
||||||
|
'login.subtitle': 'Verbinde dich mit deinem OpenClaw-Gateway',
|
||||||
|
// ... translate all keys
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Register it** in the `messages` record (same file):
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const messages: Record<string, typeof en> = { en, fr, de };
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **Add a label** for the language selector:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export const localeLabels: Record<string, string> = {
|
||||||
|
en: 'EN',
|
||||||
|
fr: 'FR',
|
||||||
|
de: 'DE',
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **Done.** The language selector, `VITE_LOCALE`, and browser auto-detection all pick it up automatically.
|
||||||
|
|
||||||
|
> **Tip:** TypeScript enforces that your new locale object has the same keys as `en` — missing translations won't compile.
|
||||||
|
|
||||||
## 🛠 Tech Stack
|
## 🛠 Tech Stack
|
||||||
|
|
||||||
- [React](https://react.dev/) 19
|
- [React](https://react.dev/) 19
|
||||||
|
|||||||
Reference in New Issue
Block a user