From 378687df525b719f8c7939b9856234facdedaae2 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Wed, 26 Apr 2023 22:00:16 +0600 Subject: [PATCH] added translations --- package.json | 4 + public/locales/en/translation.json | 10 +++ public/locales/ru/translation.json | 10 +++ src/i18n/index.ts | 16 ++++ src/i18next.d.ts | 11 +++ src/main.tsx | 4 +- .../editor/components/EditorWrapper/index.tsx | 9 ++- .../editor/components/EmptyViewer/index.tsx | 10 ++- .../components/ReactMarkdownViewer/index.tsx | 4 +- .../containers/SettingsContainer/index.tsx | 12 ++- .../settings/context/SettingsContext.ts | 1 + tsconfig.json | 5 +- yarn.lock | 75 ++++++++++++++++++- 13 files changed, 156 insertions(+), 15 deletions(-) create mode 100644 public/locales/en/translation.json create mode 100644 public/locales/ru/translation.json create mode 100644 src/i18n/index.ts create mode 100644 src/i18next.d.ts diff --git a/package.json b/package.json index d416da6..e85faea 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,12 @@ "classnames": "^2.3.2", "dockview": "^1.7.1", "formik": "^2.2.9", + "i18next": "^22.4.15", + "i18next-browser-languagedetector": "^7.0.1", + "i18next-http-backend": "^2.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-i18next": "^12.2.2", "react-markdown": "^8.0.7", "remirror": "^2.0.26", "sass": "^1.62.0", diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json new file mode 100644 index 0000000..09a3e7b --- /dev/null +++ b/public/locales/en/translation.json @@ -0,0 +1,10 @@ +{ + "Edit": "Edit", + "Save": "Save", + "Delete": "Delete", + "Nothing's here yet": "Nothing's here yet", + "Background": "Background", + "Text": "Text", + "Links": "Links", + "Colors": "Colors" +} diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json new file mode 100644 index 0000000..73d416d --- /dev/null +++ b/public/locales/ru/translation.json @@ -0,0 +1,10 @@ +{ + "Edit": "Изменить", + "Save": "Сохранить", + "Delete": "Удалить", + "Nothing's here yet": "Здесь ничего нет", + "Background": "Фон", + "Text": "Текст", + "Links": "Ссылки", + "Colors": "Цвета" +} diff --git a/src/i18n/index.ts b/src/i18n/index.ts new file mode 100644 index 0000000..c0f2a60 --- /dev/null +++ b/src/i18n/index.ts @@ -0,0 +1,16 @@ +import i18n from "i18next"; +import { initReactI18next } from "react-i18next"; +import Backend from "i18next-http-backend"; +import LanguageDetector from "i18next-browser-languagedetector"; + +i18n + .use(initReactI18next) // passes i18n down to react-i18next + .use(Backend) + .use(LanguageDetector) + .init({ + fallbackLng: "en", + debug: true, + interpolation: { + escapeValue: false, + }, + }); diff --git a/src/i18next.d.ts b/src/i18next.d.ts new file mode 100644 index 0000000..aa74b0b --- /dev/null +++ b/src/i18next.d.ts @@ -0,0 +1,11 @@ +import "i18next"; +import en from "../public/locales/en/translation.json"; + +declare module "i18next" { + interface CustomTypeOptions { + defaultNS: "en"; + resources: { + en: typeof en; + }; + } +} diff --git a/src/main.tsx b/src/main.tsx index e09f381..dcadee9 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,10 +2,12 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { Editor } from "~/pages/editor"; -import "./styles/main.scss"; import { ThemeProvider } from "./modules/theme/containers/ThemeProvider"; import { SettingsProvider } from "./modules/settings/providers/SettingsProvider"; +import "./i18n"; +import "./styles/main.scss"; + ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( diff --git a/src/modules/editor/components/EditorWrapper/index.tsx b/src/modules/editor/components/EditorWrapper/index.tsx index e4336fa..566bf19 100644 --- a/src/modules/editor/components/EditorWrapper/index.tsx +++ b/src/modules/editor/components/EditorWrapper/index.tsx @@ -1,6 +1,7 @@ import { FC, PropsWithChildren } from "react"; -import styles from "./styles.module.scss"; +import { useTranslation } from "react-i18next"; import { Button } from "~/components/buttons/Button"; +import styles from "./styles.module.scss"; interface EditorWrapperProps extends PropsWithChildren { save: () => void; @@ -8,19 +9,21 @@ interface EditorWrapperProps extends PropsWithChildren { } const EditorWrapper: FC = ({ children, save, remove }) => { + const { t } = useTranslation(); + return (
{children}
diff --git a/src/modules/editor/components/EmptyViewer/index.tsx b/src/modules/editor/components/EmptyViewer/index.tsx index c088c90..94387d2 100644 --- a/src/modules/editor/components/EmptyViewer/index.tsx +++ b/src/modules/editor/components/EmptyViewer/index.tsx @@ -1,7 +1,8 @@ import { FC } from "react"; -import styles from "./styles.module.scss"; -import { useContainerPaddings } from "~/modules/theme/hooks/useContainerPaddings"; +import { useTranslation } from "react-i18next"; import { Button } from "~/components/buttons/Button"; +import { useContainerPaddings } from "~/modules/theme/hooks/useContainerPaddings"; +import styles from "./styles.module.scss"; interface EmptyViewerProps { startEditing?: () => void; @@ -9,10 +10,11 @@ interface EmptyViewerProps { const EmptyViewer: FC = ({ startEditing }) => { const style = useContainerPaddings(); + const { t } = useTranslation(); return (
-
Nothing's here
+
{t(`Nothing's here yet`)}
diff --git a/src/modules/editor/components/ReactMarkdownViewer/index.tsx b/src/modules/editor/components/ReactMarkdownViewer/index.tsx index 84ef1d6..2c0b254 100644 --- a/src/modules/editor/components/ReactMarkdownViewer/index.tsx +++ b/src/modules/editor/components/ReactMarkdownViewer/index.tsx @@ -3,6 +3,7 @@ import ReactMarkdown from "react-markdown"; import { useContainerPaddings } from "~/modules/theme/hooks/useContainerPaddings"; import styles from "./styles.module.scss"; import { Button } from "~/components/buttons/Button"; +import { useTranslation } from "react-i18next"; interface ReactMarkdownViewerProps { value: string; @@ -13,6 +14,7 @@ const ReactMarkdownViewer: FC = ({ value, startEditing, }) => { + const { t } = useTranslation(); const style = useContainerPaddings(); return ( @@ -24,7 +26,7 @@ const ReactMarkdownViewer: FC = ({ role="button" onClick={startEditing} > - Edit + {t("Edit")}
diff --git a/src/modules/settings/containers/SettingsContainer/index.tsx b/src/modules/settings/containers/SettingsContainer/index.tsx index 0ea13c5..9e3c440 100644 --- a/src/modules/settings/containers/SettingsContainer/index.tsx +++ b/src/modules/settings/containers/SettingsContainer/index.tsx @@ -1,8 +1,10 @@ import { ChangeEvent, FC, useCallback } from "react"; import { useSettings } from "../../context/SettingsContext"; +import { useTranslation } from "react-i18next"; const SettingsContainer: FC = () => { const { update, settings } = useSettings(); + const { t } = useTranslation(); const updateBackgroundColor = useCallback( (event: ChangeEvent) => { @@ -26,8 +28,10 @@ const SettingsContainer: FC = () => { return (
+

{t("Colors")}

+