Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add fa locale

Browse Source
This commit is contained in:
F43Z
2024-11-27 23:40:42 +03:30
parent d01928a878
commit c8e9d9d169
6 changed files with 350 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

391
apps/dokploy/components/dashboard/settings/appearance-form.tsx
View File

@@ -4,28 +4,28 @@ import * as z from "zod";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Card, Card,
CardContent, CardContent,
CardDescription, CardDescription,
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { import {
Form, Form,
FormControl, FormControl,
FormDescription, FormDescription,
FormField, FormField,
FormItem, FormItem,
FormLabel, FormLabel,
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { import {
Select, Select,
SelectContent, SelectContent,
SelectItem, SelectItem,
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import useLocale from "@/utils/hooks/use-locale"; import useLocale from "@/utils/hooks/use-locale";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
@@ -34,167 +34,226 @@ import { useEffect } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
const appearanceFormSchema = z.object({ const appearanceFormSchema = z.object({
theme: z.enum(["light", "dark", "system"], { theme: z.enum(["light", "dark", "system"], {
required_error: "Please select a theme.", required_error: "Please select a theme.",
}), }),
language: z.enum(["en", "pl", "ru", "de", "zh-Hant", "zh-Hans"], { language: z.enum(["en", "pl", "ru", "de", "zh-Hant", "zh-Hans", "fa"], {
required_error: "Please select a language.", required_error: "Please select a language.",
}), }),
}); });
type AppearanceFormValues = z.infer<typeof appearanceFormSchema>; type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;
// This can come from your database or API. // This can come from your database or API.
const defaultValues: Partial<AppearanceFormValues> = { const defaultValues: Partial<AppearanceFormValues> = {
theme: "system", theme: "system",
language: "en", language: "en",
}; };
export function AppearanceForm() { export function AppearanceForm() {
const { setTheme, theme } = useTheme(); const { setTheme, theme } = useTheme();
const { locale, setLocale } = useLocale(); const { locale, setLocale } = useLocale();
const { t } = useTranslation("settings"); const { t } = useTranslation("settings");
const form = useForm<AppearanceFormValues>({ const form = useForm<AppearanceFormValues>({
resolver: zodResolver(appearanceFormSchema), resolver: zodResolver(appearanceFormSchema),
defaultValues, defaultValues,
}); });
useEffect(() => { useEffect(() => {
form.reset({ form.reset({
theme: (theme ?? "system") as AppearanceFormValues["theme"], theme: (theme ?? "system") as AppearanceFormValues["theme"],
language: locale, language: locale,
}); });
}, [form, theme, locale]); }, [form, theme, locale]);
function onSubmit(data: AppearanceFormValues) { function onSubmit(data: AppearanceFormValues) {
setTheme(data.theme); setTheme(data.theme);
setLocale(data.language); setLocale(data.language);
toast.success("Preferences Updated"); toast.success("Preferences Updated");
} }
return ( return (
<Card className="bg-transparent"> <Card className="bg-transparent">
<CardHeader> <CardHeader>
<CardTitle className="text-xl"> <CardTitle className="text-xl">
{t("settings.appearance.title")} {t("settings.appearance.title")}
</CardTitle> </CardTitle>
<CardDescription> <CardDescription>
{t("settings.appearance.description")} {t("settings.appearance.description")}
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-2"> <CardContent className="space-y-2">
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8"> <form
<FormField onSubmit={form.handleSubmit(onSubmit)}
control={form.control} className="space-y-8"
name="theme" >
defaultValue={form.control._defaultValues.theme} <FormField
render={({ field }) => { control={form.control}
return ( name="theme"
<FormItem className="space-y-1 "> defaultValue={form.control._defaultValues.theme}
<FormLabel>{t("settings.appearance.theme")}</FormLabel> render={({ field }) => {
<FormDescription> return (
{t("settings.appearance.themeDescription")} <FormItem className="space-y-1 ">
</FormDescription> <FormLabel>
<FormMessage /> {t("settings.appearance.theme")}
<RadioGroup </FormLabel>
onValueChange={field.onChange} <FormDescription>
defaultValue={field.value} {t(
value={field.value} "settings.appearance.themeDescription"
className="grid max-w-md md:max-w-lg grid-cols-1 sm:grid-cols-3 gap-8 pt-2" )}
> </FormDescription>
<FormItem> <FormMessage />
<FormLabel className="[&:has([data-state=checked])>div]:border-primary"> <RadioGroup
<FormControl> onValueChange={field.onChange}
<RadioGroupItem value="light" className="sr-only" /> defaultValue={field.value}
</FormControl> value={field.value}
<div className="items-center rounded-md border-2 border-muted p-1 hover:bg-accent transition-colors cursor-pointer"> className="grid max-w-md md:max-w-lg grid-cols-1 sm:grid-cols-3 gap-8 pt-2"
<img src="/images/theme-light.svg" alt="light" /> >
</div> <FormItem>
<span className="block w-full p-2 text-center font-normal"> <FormLabel className="[&:has([data-state=checked])>div]:border-primary">
{t("settings.appearance.themes.light")} <FormControl>
</span> <RadioGroupItem
</FormLabel> value="light"
</FormItem> className="sr-only"
<FormItem> />
<FormLabel className="[&:has([data-state=checked])>div]:border-primary"> </FormControl>
<FormControl> <div className="items-center rounded-md border-2 border-muted p-1 hover:bg-accent transition-colors cursor-pointer">
<RadioGroupItem value="dark" className="sr-only" /> <img
</FormControl> src="/images/theme-light.svg"
<div className="items-center rounded-md border-2 border-muted bg-popover p-1 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer"> alt="light"
<img src="/images/theme-dark.svg" alt="dark" /> />
</div> </div>
<span className="block w-full p-2 text-center font-normal"> <span className="block w-full p-2 text-center font-normal">
{t("settings.appearance.themes.dark")} {t(
</span> "settings.appearance.themes.light"
</FormLabel> )}
</FormItem> </span>
<FormItem> </FormLabel>
<FormLabel className="[&:has([data-state=checked])>div]:border-primary"> </FormItem>
<FormControl> <FormItem>
<RadioGroupItem <FormLabel className="[&:has([data-state=checked])>div]:border-primary">
value="system" <FormControl>
className="sr-only" <RadioGroupItem
/> value="dark"
</FormControl> className="sr-only"
<div className="items-center rounded-md border-2 border-muted bg-popover p-1 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer"> />
<img src="/images/theme-system.svg" alt="system" /> </FormControl>
</div> <div className="items-center rounded-md border-2 border-muted bg-popover p-1 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer">
<span className="block w-full p-2 text-center font-normal"> <img
{t("settings.appearance.themes.system")} src="/images/theme-dark.svg"
</span> alt="dark"
</FormLabel> />
</FormItem> </div>
</RadioGroup> <span className="block w-full p-2 text-center font-normal">
</FormItem> {t(
); "settings.appearance.themes.dark"
}} )}
/> </span>
</FormLabel>
</FormItem>
<FormItem>
<FormLabel className="[&:has([data-state=checked])>div]:border-primary">
<FormControl>
<RadioGroupItem
value="system"
className="sr-only"
/>
</FormControl>
<div className="items-center rounded-md border-2 border-muted bg-popover p-1 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer">
<img
src="/images/theme-system.svg"
alt="system"
/>
</div>
<span className="block w-full p-2 text-center font-normal">
{t(
"settings.appearance.themes.system"
)}
</span>
</FormLabel>
</FormItem>
</RadioGroup>
</FormItem>
);
}}
/>
<FormField <FormField
control={form.control} control={form.control}
name="language" name="language"
defaultValue={form.control._defaultValues.language} defaultValue={form.control._defaultValues.language}
render={({ field }) => { render={({ field }) => {
return ( return (
<FormItem className="space-y-1"> <FormItem className="space-y-1">
<FormLabel>{t("settings.appearance.language")}</FormLabel> <FormLabel>
<FormDescription> {t("settings.appearance.language")}
{t("settings.appearance.languageDescription")} </FormLabel>
</FormDescription> <FormDescription>
<FormMessage /> {t(
<Select "settings.appearance.languageDescription"
onValueChange={field.onChange} )}
defaultValue={field.value} </FormDescription>
value={field.value} <FormMessage />
> <Select
<SelectTrigger> onValueChange={field.onChange}
<SelectValue placeholder="No preset selected" /> defaultValue={field.value}
</SelectTrigger> value={field.value}
<SelectContent> >
{[ <SelectTrigger>
{ label: "English", value: "en" }, <SelectValue placeholder="No preset selected" />
{ label: "Polski", value: "pl" }, </SelectTrigger>
{ label: "Русский", value: "ru" }, <SelectContent>
{ label: "Deutsch", value: "de" }, {[
{ label: "繁體中文", value: "zh-Hant" }, {
{ label: "简体中文", value: "zh-Hans" } label: "English",
].map((preset) => ( value: "en",
<SelectItem key={preset.label} value={preset.value}> },
{preset.label} {
</SelectItem> label: "Polski",
))} value: "pl",
</SelectContent> },
</Select> {
</FormItem> label: "Русский",
); value: "ru",
}} },
/> {
label: "Deutsch",
value: "de",
},
{
label: "繁體中文",
value: "zh-Hant",
},
{
label: "简体中文",
value: "zh-Hans",
},
{
label: "Persian",
value: "fa",
},
].map((preset) => (
<SelectItem
key={preset.label}
value={preset.value}
>
{preset.label}
</SelectItem>
))}
</SelectContent>
</Select>
</FormItem>
);
}}
/>
<Button type="submit">{t("settings.common.save")}</Button> <Button type="submit">
</form> {t("settings.common.save")}
</Form> </Button>
</CardContent> </form>
</Card> </Form>
); </CardContent>
</Card>
);
} }

14
apps/dokploy/next-i18next.config.cjs
View File

@@ -1,10 +1,10 @@
/** @type {import('next-i18next').UserConfig} */ /** @type {import('next-i18next').UserConfig} */
module.exports = { module.exports = {
i18n: { i18n: {
defaultLocale: "en", defaultLocale: "en",
locales: ["en", "pl", "ru", "de", "zh-Hant", "zh-Hans"], locales: ["en", "pl", "ru", "de", "zh-Hant", "zh-Hans", "fa"],
localeDetection: false, localeDetection: false,
}, },
fallbackLng: "en", fallbackLng: "en",
keySeparator: false, keySeparator: false,
}; };

106
apps/dokploy/pages/_app.tsx
View File

@@ -14,68 +14,70 @@ import type { ReactElement, ReactNode } from "react";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & { export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode; getLayout?: (page: ReactElement) => ReactNode;
// session: Session | null; // session: Session | null;
theme?: string; theme?: string;
}; };
type AppPropsWithLayout = AppProps & { type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout; Component: NextPageWithLayout;
}; };
const MyApp = ({ const MyApp = ({
Component, Component,
pageProps: { ...pageProps }, pageProps: { ...pageProps },
}: AppPropsWithLayout) => { }: AppPropsWithLayout) => {
const getLayout = Component.getLayout ?? ((page) => page); const getLayout = Component.getLayout ?? ((page) => page);
return ( return (
<> <>
<style jsx global>{` <style jsx global>{`
:root { :root {
--font-inter: ${inter.style.fontFamily}; --font-inter: ${inter.style.fontFamily};
} }
`}</style> `}</style>
<Head> <Head>
<title>Dokploy</title> <title>Dokploy</title>
</Head> </Head>
{process.env.NEXT_PUBLIC_UMAMI_HOST && {process.env.NEXT_PUBLIC_UMAMI_HOST &&
process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && ( process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
<Script <Script
src={process.env.NEXT_PUBLIC_UMAMI_HOST} src={process.env.NEXT_PUBLIC_UMAMI_HOST}
data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID} data-website-id={
/> process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID
)} }
/>
)}
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="system" defaultTheme="system"
enableSystem enableSystem
disableTransitionOnChange disableTransitionOnChange
forcedTheme={Component.theme} forcedTheme={Component.theme}
> >
<Toaster richColors /> <Toaster richColors />
{getLayout(<Component {...pageProps} />)} {getLayout(<Component {...pageProps} />)}
</ThemeProvider> </ThemeProvider>
</> </>
); );
}; };
export default api.withTRPC( export default api.withTRPC(
appWithTranslation( appWithTranslation(
MyApp, MyApp,
// keep this in sync with next-i18next.config.js // keep this in sync with next-i18next.config.js
// if you want to know why don't just import the config file, this because next-i18next.config.js must be a CJS, but the rest of the code is ESM. // if you want to know why don't just import the config file, this because next-i18next.config.js must be a CJS, but the rest of the code is ESM.
// Add the config here is due to the issue: https://github.com/i18next/next-i18next/issues/2259 // Add the config here is due to the issue: https://github.com/i18next/next-i18next/issues/2259
// if one day every page is translated, we can safely remove this config. // if one day every page is translated, we can safely remove this config.
{ {
i18n: { i18n: {
defaultLocale: "en", defaultLocale: "en",
locales: ["en", "pl", "ru", "de", "zh-Hant", "zh-Hans"], locales: ["en", "pl", "ru", "de", "zh-Hant", "zh-Hans", "fa"],
localeDetection: false, localeDetection: false,
}, },
fallbackLng: "en", fallbackLng: "en",
keySeparator: false, keySeparator: false,
}, }
), )
); );

1
apps/dokploy/public/locales/fa/common.json Normal file
View File

@@ -0,0 +1 @@
{}

45
apps/dokploy/public/locales/fa/settings.json Normal file
View File

@@ -0,0 +1,45 @@
{
"settings.common.save": "ذخیره",
"settings.server.domain.title": "دامنه سرور",
"settings.server.domain.description": "یک دامنه به برنامه سرور خود اضافه کنید.",
"settings.server.domain.form.domain": "دامنه",
"settings.server.domain.form.letsEncryptEmail": "ایمیل Let's Encrypt",
"settings.server.domain.form.certificate.label": "گواهینامه",
"settings.server.domain.form.certificate.placeholder": "یک گواهینامه انتخاب کنید",
"settings.server.domain.form.certificateOptions.none": "هیچکدام",
"settings.server.domain.form.certificateOptions.letsencrypt": "Let's Encrypt (پیش‌فرض)",
"settings.server.webServer.title": "وب سرور",
"settings.server.webServer.description": "وب سرور را بازنشانی یا پاک کنید.",
"settings.server.webServer.actions": "اقدامات",
"settings.server.webServer.reload": "بارگذاری مجدد",
"settings.server.webServer.watchLogs": "مشاهده گزارش‌ها",
"settings.server.webServer.updateServerIp": "به‌روزرسانی آی‌پی سرور",
"settings.server.webServer.server.label": "سرور",
"settings.server.webServer.traefik.label": "ترافیک",
"settings.server.webServer.traefik.modifyEnv": "ویرایش محیط",
"settings.server.webServer.storage.label": "فضا",
"settings.server.webServer.storage.cleanUnusedImages": "پاکسازی Image های بدون استفاده",
"settings.server.webServer.storage.cleanUnusedVolumes": "پاک‌سازی ولوم‌های بدون استفاده",
"settings.server.webServer.storage.cleanStoppedContainers": "پاک‌سازی کانتینرهای متوقف‌شده",
"settings.server.webServer.storage.cleanDockerBuilder": "پاک‌سازی بیلدر و سیستم داکر",
"settings.server.webServer.storage.cleanMonitoring": "پاک‌سازی پایش",
"settings.server.webServer.storage.cleanAll": "پاک‌سازی همه",
"settings.profile.title": "حساب کاربری",
"settings.profile.description": "جزئیات پروفایل خود را در اینجا تغییر دهید.",
"settings.profile.email": "ایمیل",
"settings.profile.password": "رمز عبور",
"settings.profile.avatar": "تصویر پروفایل",
"settings.appearance.title": "ظاهر",
"settings.appearance.description": "تم داشبورد خود را سفارشی کنید.",
"settings.appearance.theme": "تم",
"settings.appearance.themeDescription": "یک تم برای داشبورد خود انتخاب کنید",
"settings.appearance.themes.light": "روشن",
"settings.appearance.themes.dark": "تاریک",
"settings.appearance.themes.system": "سیستم",
"settings.appearance.language": "زبان",
"settings.appearance.languageDescription": "یک زبان برای داشبورد خود انتخاب کنید"
}

28
apps/dokploy/utils/hooks/use-locale.ts
View File

@@ -1,19 +1,27 @@
import Cookies from "js-cookie"; import Cookies from "js-cookie";
const SUPPORTED_LOCALES = ["en", "pl", "ru", "de", "zh-Hant", "zh-Hans"] as const; const SUPPORTED_LOCALES = [
"en",
"pl",
"ru",
"de",
"zh-Hant",
"zh-Hans",
"fa",
] as const;
type Locale = (typeof SUPPORTED_LOCALES)[number]; type Locale = (typeof SUPPORTED_LOCALES)[number];
export default function useLocale() { export default function useLocale() {
const currentLocale = (Cookies.get("DOKPLOY_LOCALE") ?? "en") as Locale; const currentLocale = (Cookies.get("DOKPLOY_LOCALE") ?? "en") as Locale;
const setLocale = (locale: Locale) => { const setLocale = (locale: Locale) => {
Cookies.set("DOKPLOY_LOCALE", locale, { expires: 365 }); Cookies.set("DOKPLOY_LOCALE", locale, { expires: 365 });
window.location.reload(); window.location.reload();
}; };
return { return {
locale: currentLocale, locale: currentLocale,
setLocale, setLocale,
}; };
} }