mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-06-26 18:26:38 +00:00
891257c1e2
This commit introduces internationalization (i18n) to your application using the `remix-i18next` framework, along with `i18next` and `react-i18next`. It also includes Turkish as the first additional language.
Key changes include:
1. **Framework Integration:**
* Installed necessary dependencies: `remix-i18next`, `i18next`, `react-i18next`, `i18next-browser-languagedetector`, and `i18next-http-backend`.
* Configured `remix-i18next` middleware (`app/middleware/i18next.ts`) with language detection (cookie-based) and resource loading.
* Updated `app/root.tsx` to incorporate the i18n middleware, manage locale state via a loader, and set appropriate HTML attributes.
* Modified `app/entry.client.tsx` and `app/entry.server.tsx` to initialize i18next and wrap the application with `I18nextProvider` for both client-side rendering and SSR.
2. **Localization Files:**
* Created `app/locales/en.ts` for English (fallback) translations.
* Created `app/locales/tr.ts` for Turkish translations.
* Populated these files with initial strings for UI elements in the header.
3. **Component Internationalization:**
* Modified `app/components/header/Header.tsx` and `app/components/header/HeaderActionButtons.client.tsx` to use the `useTranslation` hook and `t()` function for displaying translated strings. This includes static text, dynamic text with interpolation, and alt attributes for images.
4. **Language Switching:**
* Implemented a language switcher dropdown component within `app/components/header/Header.tsx`.
* The switcher allows you to select between English and Turkish, with the selection persisted via a cookie.
5. **Documentation:**
* Added a new "Internationalization (i18n)" section to `README.md`, detailing how to add/modify translations and support new languages.
This work completes Part 1 of the issue, laying the foundation for a multilingual application.
|
||
|---|---|---|
| .. | ||
| components | ||
| lib | ||
| locales | ||
| middleware | ||
| routes | ||
| styles | ||
| types | ||
| utils | ||
| entry.client.tsx | ||
| entry.server.tsx | ||
| root.tsx | ||
| vite-env.d.ts | ||