Add translations to layout components

master-co · Jan 22, 2024 · beddaf1 · beddaf1
1 parent cb27317
commit beddaf1
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/website/app/[locale]/(root)/layout.tsx b/website/app/[locale]/(root)/layout.tsx
@@ -1,3 +1,4 @@
+import { importTranslations } from '~/i18n'
 import RootLayout from '../root.layout'
 import i18n from '~/i18n.config.mjs'
 
@@ -17,6 +18,6 @@ export default async function Layout({ children, params }: {
     params: { locale: typeof i18n.locales[number] }
 }) {
     return (
-        <RootLayout bodyClassName='bg:base' locale={params.locale}>{children}</RootLayout>
+        <RootLayout bodyClassName='bg:base' locale={params.locale} translations={await importTranslations(params.locale)}>{children}</RootLayout>
     )
 }
diff --git a/website/app/[locale]/examples/layout.tsx b/website/app/[locale]/examples/layout.tsx
@@ -1,3 +1,4 @@
+import { importTranslations } from '~/i18n'
 import RootLayout from '../root.layout'
 import i18n from '~/i18n.config.mjs'
 
@@ -17,6 +18,6 @@ export default async function Layout({ children, params }: {
     params: { locale: typeof i18n.locales[number] }
 }) {
     return (
-        <RootLayout locale={params.locale}>{children}</RootLayout>
+        <RootLayout locale={params.locale} translations={await importTranslations(params.locale)}>{children}</RootLayout>
     )
 }
diff --git a/website/app/[locale]/play/layout.tsx b/website/app/[locale]/play/layout.tsx
@@ -3,6 +3,7 @@ import metadata from './metadata'
 import { generate } from '~/utils/metadata'
 import Script from 'next/script'
 import i18n from '~/i18n.config.mjs'
+import { importTranslations } from '~/i18n'
 
 export async function generateMetadata(props: any, parent: any) {
     return await generate(metadata, props, parent)
@@ -13,7 +14,7 @@ export default async function Layout({ children, params }: {
     params: { locale: typeof i18n['locales'][number] }
 }) {
     return (
-        <RootLayout locale={params.locale} bodyClassName='bg:base' style={{ display: 'none' }}>
+        <RootLayout locale={params.locale} translations={await importTranslations(params.locale)} bodyClassName='bg:base' style={{ display: 'none' }}>
             <>
                 <Script src="/monaco-editor/vs/loader.js" strategy="worker" />
                 <Script src="/monaco-editor/vs/editor/editor.main.js" strategy="worker" />

diff --git a/website/app/[locale]/root.layout.tsx b/website/app/[locale]/root.layout.tsx
@@ -1,18 +1,28 @@
+'use client'
+
 import '../globals.css'
 import { getPreInitScript } from 'theme-service'
 import clsx from 'clsx'
 import { HTMLAttributes } from 'react'
-import dynamic from 'next/dynamic'
-import i18n from '~/i18n.config.mjs'
 import { importTranslations } from '~/i18n'
 
-const Client = dynamic(() => import('./client'))
+import { RedirectsProvider } from 'websites/contexts/redirects'
+import { LocaleProvider } from 'websites/contexts/locale'
+import { I18nProvider } from 'websites/contexts/i18n'
+import redirects from '~/redirects.mjs'
+import { Analytics } from '@vercel/analytics/react'
+import config from '~/master.css'
+import CSSRuntimeProvider from '@master/css.react/CSSRuntimeProvider'
+import ThemeServiceProvider from '@master/css.react/ThemeServiceProvider'
+import { SpeedInsights } from '@vercel/speed-insights/next'
+import i18n from '~/i18n.config.mjs'
 
-export default async function RootLayout({ children, locale, bodyClassName, style }: {
+export default function RootLayout({ children, locale, bodyClassName, style, translations }: {
     children: JSX.Element,
     locale: typeof i18n['locales'][number],
     style?: HTMLAttributes<any>['style'],
-    bodyClassName?: string
+    bodyClassName?: string,
+    translations: any
 }) {
     return (
         <html lang={locale} style={process.env.NODE_ENV === 'development' ? { display: 'none' } : style}>
@@ -23,9 +33,19 @@ export default async function RootLayout({ children, locale, bodyClassName, styl
                 {locale === 'tw' && <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=block" rel="stylesheet" />}
             </head>
             <body className={clsx(bodyClassName, '{font:mono;font-feature:normal}_:where(code,kbd,samp) bg:slate-50/.2_:where(::selection) fg:neutral font-feature:\'salt\' font:sans overflow-x:hidden')}>
-                <Client locale={locale} translations={await importTranslations(locale)}>
-                    {children}
-                </Client>
+                <ThemeServiceProvider options={{ default: 'system' }}>
+                    <CSSRuntimeProvider config={config}>
+                        <RedirectsProvider value={redirects}>
+                            <I18nProvider value={{ ...i18n, translations }}>
+                                <LocaleProvider value={locale}>
+                                    {children}
+                                </LocaleProvider>
+                            </I18nProvider>
+                        </RedirectsProvider>
+                    </CSSRuntimeProvider>
+                </ThemeServiceProvider>
+                <Analytics />
+                <SpeedInsights />
             </body>
         </html>
     )