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.
41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
// app/middleware/i18next.ts
|
|
import { createCookie } from "@remix-run/node"; // Or "@remix-run/cloudflare" if deployed on Cloudflare
|
|
import { unstable_createI18nextMiddleware } from "remix-i18next/middleware";
|
|
import Backend from "i18next-http-backend";
|
|
|
|
import en from "~/locales/en";
|
|
import tr from "~/locales/tr";
|
|
|
|
// Create a cookie object to store the user's language preference
|
|
export const localeCookie = createCookie("lng", {
|
|
path: "/",
|
|
sameSite: "lax",
|
|
secure: process.env.NODE_ENV === "production",
|
|
httpOnly: true,
|
|
});
|
|
|
|
export const [i18nextMiddleware, getLocale, getInstance] =
|
|
unstable_createI18nextMiddleware({
|
|
detection: {
|
|
supportedLanguages: ["en", "tr"],
|
|
fallbackLanguage: "en",
|
|
cookie: localeCookie, // Use the cookie to detect language
|
|
order: ["cookie", "header"], // Order of detection: cookie, then Accept-Language header
|
|
},
|
|
i18next: {
|
|
supportedLngs: ["en", "tr"],
|
|
fallbackLng: "en",
|
|
defaultNS: "translation", // Default namespace
|
|
resources: {
|
|
en: { translation: en },
|
|
tr: { translation: tr },
|
|
},
|
|
// If you want to load translations from a backend (e.g., /locales/{{lng}}.json)
|
|
// backend: {
|
|
// loadPath: "/locales/{{lng}}.json", // Path to your translation files
|
|
// },
|
|
// initImmediate: false, // Important for SSR to prevent issues
|
|
},
|
|
// backend: Backend, // Uncomment if using i18next-http-backend to load files
|
|
});
|