feat(translations): add crowdin live support (#4177)

2025-10-02 19:54:08 +02:00
parent 878f8f3d60
commit 514034d184
8 changed files with 100 additions and 42 deletions
--- a/apps/nextjs/src/app/[locale]/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/layout.tsx
@@ -23,6 +23,7 @@ import type { SupportedLanguage } from "@homarr/translation";
 import { isLocaleRTL, isLocaleSupported } from "@homarr/translation";

 import { Analytics } from "~/components/layout/analytics";
+import { CrowdinLiveTranslation } from "~/components/layout/crowdin-live-translation";
 import { SearchEngineOptimization } from "~/components/layout/search-engine-optimization";
 import { getCurrentColorSchemeAsync } from "~/theme/color-scheme";
 import { DayJsLoader } from "./_client-providers/dayjs-loader";
@@ -118,10 +119,12 @@ export default async function Layout(props: {
    (innerProps) => <SpotlightProvider {...innerProps} />,
  ]);

+  const { locale } = await props.params;
+
  return (
    // Instead of ColorSchemScript we use data-mantine-color-scheme to prevent flickering
    <html
-      lang={(await props.params).locale}
+      lang={locale}
      dir={direction}
      data-mantine-color-scheme={colorScheme}
      style={{
@@ -132,6 +135,7 @@ export default async function Layout(props: {
      <head>
        <Analytics />
        <SearchEngineOptimization />
+        <CrowdinLiveTranslation locale={locale} />
      </head>
      <body className={["font-sans", fontSans.variable].join(" ")}>
        <StackedProvider>