Add localize (wip)

apps/app/public/static/locales/en_US/translation.json

@@ -348,6 +348,10 @@
     "compare_latest": "Compare latest revision",
     "compare_previous": "Compare previous revision"
   },
+  "lsx": {
+    "load_more": "Load more",
+    "pages_left": "\"{{leftItemsNum}}\"pages left"
+  },
   "modal_rename": {
     "label": {
       "Move/Rename page": "Move/Rename page",

apps/app/public/static/locales/ja_JP/translation.json

@@ -381,6 +381,10 @@
     "compare_latest": "最新と比較",
     "compare_previous": "1つ前のバージョンと比較"
   },
+  "lsx": {
+    "load_more": "さらに表示",
+    "pages_left": "残り\"{{leftItemsNum}}\"ページ"
+  },
   "modal_rename": {
     "label": {
       "Move/Rename page": "ページを移動/名前変更する",

apps/app/public/static/locales/zh_CN/translation.json

@@ -338,6 +338,10 @@
     "compare_latest": "比較最新版本",
     "compare_previous": "比較以前的版本"
   },
+  "lsx": {
+    "load_more": "Load more",
+    "pages_left": "\"{{leftItemsNum}}\"pages left"
+  },
   "modal_rename": {
     "label": {
       "Move/Rename page": "页面 移动/重命名",

packages/remark-lsx/src/client/components/Lsx.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 
-
 import { LoadingSpinner } from '@growi/ui/dist/components';
+import { useTranslation } from 'next-i18next';
 
 import { useSWRxLsx } from '../stores/lsx';
 import { generatePageNodeTree } from '../utils/page-node';
@@ -47,6 +47,8 @@ const LsxSubstance = React.memo(({
   const hasError = error != null;
   const errorMessage = error?.message;
 
+  const { t } = useTranslation();
+
   const Error = useCallback((): JSX.Element => {
     if (!hasError) {
       return <></>;
@@ -116,8 +118,8 @@ const LsxSubstance = React.memo(({
             className="btn btn btn-outline-secondary btn-load-more"
             onClick={() => setSize(size => size + 1)}
           >
-            Load more<br />
-            <span className="text-muted small start-items-label">({leftItemsNum} pages left)</span>
+            {t('lsx.load_more')}<br />
+            <span className="text-muted small start-items-label">{t('lsx.pages_left')}</span>
           </button>
         </div>
       </div>