Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-19 03:31:11 +10:00
Code Issues Packages Projects Releases Wiki Activity

Support I18n (#243)

Browse Source 
* feat: support i18n

* feat: wip support i18n

* feat: complete space translation

* feat: complete page translation

* feat: update space translation

* feat: update workspace translation

* feat: update group translation

* feat: update workspace translation

* feat: update page translation

* feat: update user translation

* chore: update pnpm-lock

* feat: add query translation

* refactor: merge to single file

* chore: remove necessary code

* feat: save language to BE

* fix: only load current language

* feat: save language to locale column

* fix: cleanups

* add language menu to preferences page

* new translations

* translate editor

* Translate editor placeholders

* translate space selection component

---------

Co-authored-by: Philip Okugbe <phil@docmost.com>
Co-authored-by: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
This commit is contained in:
lleohao
2025-01-04 21:17:17 +08:00
committed by GitHub
parent 290b7d9d94
commit 670ee64179
119 changed files with 1672 additions and 649 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/client/src/pages/auth/invite-signup.tsx
View File

@ -1,13 +1,16 @@
import { Helmet } from "react-helmet-async";
import { InviteSignUpForm } from "@/features/auth/components/invite-sign-up-form.tsx";
import {getAppName} from "@/lib/config.ts";
import { useTranslation } from "react-i18next";
export default function InviteSignup() {
const { t } = useTranslation();
return (
<>
<Helmet>
<title>Invitation Signuo - {getAppName()}</title>
</Helmet>
<Helmet>
<title>{t("Invitation Signup")} - {getAppName()}</title>
</Helmet>
<InviteSignUpForm />
</>
);

5
apps/client/src/pages/auth/login.tsx
View File

@ -1,12 +1,15 @@
import { LoginForm } from "@/features/auth/components/login-form";
import { Helmet } from "react-helmet-async";
import {getAppName} from "@/lib/config.ts";
import { useTranslation } from "react-i18next";
export default function LoginPage() {
const { t } = useTranslation();
return (
<>
<Helmet>
<title>Login - {getAppName()}</title>
<title>{t("Login")} - {getAppName()}</title>
</Helmet>
<LoginForm />
</>

4
apps/client/src/pages/auth/setup-workspace.tsx
View File

@ -4,8 +4,10 @@ import { Helmet } from "react-helmet-async";
import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import {getAppName} from "@/lib/config.ts";
import { useTranslation } from "react-i18next";
export default function SetupWorkspace() {
const { t } = useTranslation();
const {
data: workspace,
isLoading,
@ -33,7 +35,7 @@ export default function SetupWorkspace() {
return (
<>
<Helmet>
<title>Setup Workspace - {getAppName()}</title>
<title>{t("Setup Workspace")} - {getAppName()}</title>
</Helmet>
<SetupWorkspaceForm />
</>

6
apps/client/src/pages/page/page.tsx
View File

@ -12,8 +12,10 @@ import {
SpaceCaslAction,
SpaceCaslSubject,
} from "@/features/space/permissions/permissions.type.ts";
import { useTranslation } from "react-i18next";
export default function Page() {
const { t } = useTranslation();
const { pageSlug } = useParams();
const {
data: page,
@ -31,7 +33,7 @@ export default function Page() {
if (isError || !page) {
// TODO: fix this
return <div>Error fetching page data.</div>;
return <div>{t("Error fetching page data.")}</div>;
}
if (!space) {
@ -42,7 +44,7 @@ export default function Page() {
page && (
<div>
<Helmet>
<title>{`${page?.icon || ""} ${page?.title || "untitled"}`}</title>
<title>{`${page?.icon || ""} ${page?.title || t("untitled")}`}</title>
</Helmet>
<PageHeader

41
apps/client/src/pages/settings/account/account-preferences.tsx
View File

@ -1,20 +1,33 @@
import SettingsTitle from "@/components/settings/settings-title.tsx";
import AccountLanguage from "@/features/user/components/account-languate";
import AccountTheme from "@/features/user/components/account-theme.tsx";
import PageWidthPref from "@/features/user/components/page-width-pref.tsx";
import {Divider} from "@mantine/core";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
import { Divider } from "@mantine/core";
import { getAppName } from "@/lib/config.ts";
import { Helmet } from "react-helmet-async";
import { useTranslation } from "react-i18next";
export default function AccountPreferences() {
return (
<>
<Helmet>
<title>Preferences - {getAppName()}</title>
</Helmet>
<SettingsTitle title="Preferences"/>
<AccountTheme/>
<Divider my={"md"}/>
<PageWidthPref/>
</>
);
const { t } = useTranslation();
return (
<>
<Helmet>
<title>
{t("Preferences")} - {getAppName()}
</title>
</Helmet>
<SettingsTitle title={t("Preferences")} />
<AccountTheme />
<Divider my={"md"} />
<AccountLanguage />
<Divider my={"md"} />
<PageWidthPref />
</>
);
}

7
apps/client/src/pages/settings/account/account-settings.tsx
View File

@ -6,14 +6,17 @@ import AccountAvatar from "@/features/user/components/account-avatar";
import SettingsTitle from "@/components/settings/settings-title.tsx";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
import { useTranslation } from "react-i18next";
export default function AccountSettings() {
const { t } = useTranslation();
return (
<>
<Helmet>
<title>My Profile - {getAppName()}</title>
<title>{t("My Profile")} - {getAppName()}</title>
</Helmet>
<SettingsTitle title="My Profile" />
<SettingsTitle title={t("My Profile")} />
<AccountAvatar />

29
apps/client/src/pages/settings/group/group-info.tsx
View File

@ -1,18 +1,23 @@
import SettingsTitle from "@/components/settings/settings-title.tsx";
import GroupMembersList from "@/features/group/components/group-members";
import GroupDetails from "@/features/group/components/group-details";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
import { getAppName } from "@/lib/config.ts";
import { Helmet } from "react-helmet-async";
import { useTranslation } from "react-i18next";
export default function GroupInfo() {
return (
<>
<Helmet>
<title>Manage Group - {getAppName()}</title>
</Helmet>
<SettingsTitle title="Manage Group"/>
<GroupDetails/>
<GroupMembersList/>
</>
);
const { t } = useTranslation();
return (
<>
<Helmet>
<title>
{t("Manage Group")} - {getAppName()}
</title>
</Helmet>
<SettingsTitle title={t("Manage Group")} />
<GroupDetails />
<GroupMembersList />
</>
);
}

6
apps/client/src/pages/settings/group/groups.tsx
View File

@ -5,16 +5,18 @@ import CreateGroupModal from "@/features/group/components/create-group-modal";
import useUserRole from "@/hooks/use-user-role.tsx";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
import { useTranslation } from "react-i18next";
export default function Groups() {
const { t } = useTranslation();
const { isAdmin } = useUserRole();
return (
<>
<Helmet>
<title>Groups - {getAppName()}</title>
<title>{t("Groups")} - {getAppName()}</title>
</Helmet>
<SettingsTitle title="Groups" />
<SettingsTitle title={t("Groups")} />
<Group my="md" justify="flex-end">
{isAdmin && <CreateGroupModal />}

36
apps/client/src/pages/settings/space/spaces.tsx
View File

@ -1,26 +1,30 @@
import SettingsTitle from "@/components/settings/settings-title.tsx";
import SpaceList from "@/features/space/components/space-list.tsx";
import useUserRole from "@/hooks/use-user-role.tsx";
import {Group} from "@mantine/core";
import { Group } from "@mantine/core";
import CreateSpaceModal from "@/features/space/components/create-space-modal.tsx";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
import { Helmet } from "react-helmet-async";
import { getAppName } from "@/lib/config.ts";
import { useTranslation } from "react-i18next";
export default function Spaces() {
const {isAdmin} = useUserRole();
const { t } = useTranslation();
const { isAdmin } = useUserRole();
return (
<>
<Helmet>
<title>Spaces - {getAppName()}</title>
</Helmet>
<SettingsTitle title="Spaces"/>
return (
<>
<Helmet>
<title>
{t("Spaces")} - {getAppName()}
</title>
</Helmet>
<SettingsTitle title={t("Spaces")} />
<Group my="md" justify="flex-end">
{isAdmin && <CreateSpaceModal/>}
</Group>
<Group my="md" justify="flex-end">
{isAdmin && <CreateSpaceModal />}
</Group>
<SpaceList/>
</>
);
<SpaceList />
</>
);
}

10
apps/client/src/pages/settings/workspace/workspace-members.tsx
View File

@ -8,12 +8,14 @@ import WorkspaceInvitesTable from "@/features/workspace/components/members/compo
import useUserRole from "@/hooks/use-user-role.tsx";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
import { useTranslation } from "react-i18next";
export default function WorkspaceMembers() {
const [segmentValue, setSegmentValue] = useState("members");
const [searchParams] = useSearchParams();
const {isAdmin} = useUserRole();
const navigate = useNavigate();
const { t } = useTranslation();
useEffect(() => {
const currentTab = searchParams.get("tab");
@ -34,9 +36,9 @@ export default function WorkspaceMembers() {
return (
<>
<Helmet>
<title>Members - {getAppName()}</title>
<title>{t("Members")} - {getAppName()}</title>
</Helmet>
<SettingsTitle title="Members"/>
<SettingsTitle title={t("Members")}/>
{/* <WorkspaceInviteSection /> */}
{/* <Divider my="lg" /> */}
@ -46,8 +48,8 @@ export default function WorkspaceMembers() {
value={segmentValue}
onChange={handleSegmentChange}
data={[
{label: "Members", value: "members"},
{label: "Pending", value: "invites"},
{ label: t("Members"), value: "members" },
{ label: t("Pending"), value: "invites" },
]}
withItemsBorders={false}
/>

4
apps/client/src/pages/settings/workspace/workspace-settings.tsx
View File

@ -1,15 +1,17 @@
import SettingsTitle from "@/components/settings/settings-title.tsx";
import WorkspaceNameForm from "@/features/workspace/components/settings/components/workspace-name-form";
import { useTranslation } from "react-i18next";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
export default function WorkspaceSettings() {
const { t } = useTranslation();
return (
<>
<Helmet>
<title>Workspace Settings - {getAppName()}</title>
</Helmet>
<SettingsTitle title="General"/>
<SettingsTitle title={t("General")} />
<WorkspaceNameForm/>
</>
);