umputun#10 add localization

frontend/.gitignore

@@ -1 +1,2 @@
 .env
+extracted-meassages

frontend/app/common/config-types.ts

@@ -16,6 +16,7 @@ export interface CommentsConfig {
   theme?: Theme;
   page_title?: string;
   node?: string;
+  locale?: string;
 }
 
 export interface LastCommentsConfig {

frontend/app/components/comment-form/comment-form.tsx

@@ -1,5 +1,6 @@
 /** @jsx createElement */
 import { createElement, Component, createRef, Fragment } from 'preact';
+import { FormattedMessage } from 'react-intl';
 import b, { Mix } from 'bem-react-helper';
 
 import { User, Theme, Image, ApiError } from '@app/common/types';
@@ -51,12 +52,6 @@ interface State {
   buttonText: null | string;
 }
 
-const Labels = {
-  main: 'Send',
-  edit: 'Save',
-  reply: 'Reply',
-};
-
 const ImageMimeRegex = /image\//i;
 
 export class CommentForm extends Component<Props, State> {
@@ -343,6 +338,11 @@ export class CommentForm extends Component<Props, State> {
   render(props: Props, { isDisabled, isErrorShown, errorMessage, preview, maxLength, text, buttonText }: State) {
     const charactersLeft = maxLength - text.length;
     errorMessage = props.errorMessage || errorMessage;
+    const Labels = {
+      main: <FormattedMessage id="commentForm.send" defaultMessage="Send" />,
+      edit: <FormattedMessage id="commentForm.save" defaultMessage="Save" />,
+      reply: <FormattedMessage id="commentForm.replay" defaultMessage="Replay" />,
+    };
     const label = buttonText || Labels[props.mode || 'main'];
 
     return (
@@ -439,7 +439,9 @@ export class CommentForm extends Component<Props, State> {
         !!preview && (
           <div className="comment-form__preview-wrapper">
             <div
-              className={b('comment-form__preview', { mix: b('raw-content', {}, { theme: props.theme }) })}
+              className={b('comment-form__preview', {
+                mix: b('raw-content', {}, { theme: props.theme }),
+              })}
               dangerouslySetInnerHTML={{ __html: preview }}
             />
           </div>

frontend/app/components/comment/comment.tsx

@@ -22,6 +22,7 @@ import Countdown from '@app/components/countdown';
 import { boundActions } from './connected-comment';
 import { getPreview, uploadImage } from '@app/common/api';
 import postMessage from '@app/utils/postMessage';
+import { FormattedMessage } from 'react-intl';
 
 export type Props = {
   user: User | null;
@@ -405,7 +406,7 @@ export class Comment extends Component<Props, State> {
     if (!isCurrentUser) {
       controls.push(
         <Button kind="link" {...getHandleClickProps(this.hideUser)} mix="comment__control">
-          Hide
+          <FormattedMessage id="comment.hide" defaultMessage="Hide" />
         </Button>
       );
     }

frontend/app/locales/en.json

@@ -0,0 +1,6 @@
+{
+  "commentForm.send": "Send",
+  "commentForm.save": "Save",
+  "commentForm.replay": "Replay",
+  "comment.hide": "Hide"
+}

frontend/app/locales/ru.json

@@ -0,0 +1,6 @@
+{
+  "commentForm.send": "Отправить",
+  "commentForm.save": "Сохранить",
+  "commentForm.replay": "Ответить",
+  "comment.hide": "Спрятать"
+}

frontend/app/remark.tsx

@@ -1,6 +1,8 @@
 /** @jsx createElement */
 import loadPolyfills from '@app/common/polyfills';
 
+import { IntlProvider } from 'react-intl';
+
 import { createElement, render } from 'preact';
 import 'preact/debug';
 import { bindActionCreators } from 'redux';
@@ -26,6 +28,14 @@ if (document.readyState === 'loading') {
   init();
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+async function loadLocale(locale: string): Promise<any> {
+  if (locale === 'ru') {
+    return import(/* webpackChunkName: "ru" */ `./locales/ru.json`);
+  }
+  return {};
+}
+
 async function init(): Promise<void> {
   __webpack_public_path__ = BASE_URL + '/web/';
 
@@ -56,7 +66,8 @@ async function init(): Promise<void> {
       }
       return memo;
     }, {});
-
+  const locale = params.locale || `en`;
+  const messages = await loadLocale(locale).catch(() => {});
   StaticStore.config = await api.getConfig();
 
   if (params.page === 'user-info') {
@@ -73,9 +84,11 @@ async function init(): Promise<void> {
   }
 
   render(
-    <Provider store={reduxStore}>
-      <ConnectedRoot />
-    </Provider>,
+    <IntlProvider locale={locale} messages={messages}>
+      <Provider store={reduxStore}>
+        <ConnectedRoot />
+      </Provider>
+    </IntlProvider>,
     node
   );
 }

frontend/index.ejs

@@ -126,7 +126,8 @@
         host: window.location.origin,
         url: 'https://remark42.com/demo/',
         components: ['embed', 'counter'],
-        theme: theme
+        theme: theme,
+        // locale: "ru"
       };
 
       (function(c, d) {