mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-06-26 18:26:38 +00:00
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. |
||
---|---|---|
.. | ||
i18next.ts |