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.
129 lines
4.3 KiB
TypeScript
129 lines
4.3 KiB
TypeScript
import { useStore } from '@nanostores/react';
|
|
import type { LinksFunction } from '@remix-run/cloudflare';
|
|
import { json, Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react';
|
|
import { unstable_LoaderFunctionArgs as LoaderFunctionArgs } from "@remix-run/node"; // or cloudflare
|
|
import { useChangeLanguage } from "remix-i18next/react";
|
|
import { i18nextMiddleware, getLocale, localeCookie } from "~/middleware/i18next"; // Adjust path if necessary
|
|
import { useTranslation } from "react-i18next";
|
|
import tailwindReset from '@unocss/reset/tailwind-compat.css?url';
|
|
import { themeStore } from './lib/stores/theme';
|
|
import { stripIndents } from './utils/stripIndent';
|
|
import { createHead } from 'remix-island';
|
|
import { useEffect } from 'react';
|
|
import { DndProvider } from 'react-dnd';
|
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
import { ClientOnly } from 'remix-utils/client-only';
|
|
|
|
import reactToastifyStyles from 'react-toastify/dist/ReactToastify.css?url';
|
|
import globalStyles from './styles/index.scss?url';
|
|
import xtermStyles from '@xterm/xterm/css/xterm.css?url';
|
|
|
|
import 'virtual:uno.css';
|
|
|
|
export const unstable_middleware = [i18nextMiddleware];
|
|
|
|
export async function loader({ request, context }: LoaderFunctionArgs) {
|
|
// Note: getLocale now takes context if using the latest remix-i18next middleware style
|
|
// For older versions or direct RemixI18Next class, it might take request directly.
|
|
// Assuming context is passed correctly by the middleware setup.
|
|
let locale = await getLocale(context); // Or simply getLocale(request) with older remix-i18next
|
|
return json(
|
|
{ locale },
|
|
{ headers: { "Set-Cookie": await localeCookie.serialize(locale) } }
|
|
);
|
|
}
|
|
|
|
export const links: LinksFunction = () => [
|
|
{
|
|
rel: 'icon',
|
|
href: '/favicon.svg',
|
|
type: 'image/svg+xml',
|
|
},
|
|
{ rel: 'stylesheet', href: reactToastifyStyles },
|
|
{ rel: 'stylesheet', href: tailwindReset },
|
|
{ rel: 'stylesheet', href: globalStyles },
|
|
{ rel: 'stylesheet', href: xtermStyles },
|
|
{
|
|
rel: 'preconnect',
|
|
href: 'https://fonts.googleapis.com',
|
|
},
|
|
{
|
|
rel: 'preconnect',
|
|
href: 'https://fonts.gstatic.com',
|
|
crossOrigin: 'anonymous',
|
|
},
|
|
{
|
|
rel: 'stylesheet',
|
|
href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
|
|
},
|
|
];
|
|
|
|
const inlineThemeCode = stripIndents`
|
|
setTutorialKitTheme();
|
|
|
|
function setTutorialKitTheme() {
|
|
let theme = localStorage.getItem('bolt_theme');
|
|
|
|
if (!theme) {
|
|
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
|
|
document.querySelector('html')?.setAttribute('data-theme', theme);
|
|
}
|
|
`;
|
|
|
|
export const Head = createHead(() => (
|
|
<>
|
|
<meta charSet="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<Meta />
|
|
<Links />
|
|
<script dangerouslySetInnerHTML={{ __html: inlineThemeCode }} />
|
|
</>
|
|
));
|
|
|
|
export function Layout({ children }: { children: React.ReactNode }) {
|
|
const theme = useStore(themeStore);
|
|
let { i18n } = useTranslation();
|
|
let { locale } = useLoaderData<typeof loader>();
|
|
|
|
useChangeLanguage(locale);
|
|
|
|
useEffect(() => {
|
|
// Theme setting logic remains, but now it's inside the html tag rendered by this Layout
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
}, [theme]);
|
|
|
|
return (
|
|
<html lang={i18n.language} dir={i18n.dir(i18n.language)} data-theme={theme}>
|
|
<Head />
|
|
<body>
|
|
<ClientOnly>{() => <DndProvider backend={HTML5Backend}>{children}</DndProvider>}</ClientOnly>
|
|
<ScrollRestoration />
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
import { logStore } from './lib/stores/logs';
|
|
|
|
export default function App() {
|
|
const theme = useStore(themeStore); // This theme is for the log, Layout handles the html attribute
|
|
|
|
useEffect(() => {
|
|
logStore.logSystem('Application initialized', {
|
|
theme,
|
|
platform: navigator.platform,
|
|
userAgent: navigator.userAgent,
|
|
timestamp: new Date().toISOString(),
|
|
});
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []); // Keep theme dependency if log needs to re-run on theme change, otherwise remove. For init, empty array is fine.
|
|
|
|
|
|
// useChangeLanguage was moved to Layout as it needs loaderData.
|
|
// The main Outlet is rendered within the Layout defined above.
|
|
return <Outlet />;
|
|
}
|