browser language detection

components/AnnotationItem/data.ts

@@ -55,6 +55,10 @@ const data: Record<string, any> = {
     text: 'Radio Button',
     icon: 'radio-button',
   },
+  Image: {
+    text: 'Image',
+    icon: 'add-image',
+  },
 };
 
 export default data;

containers/FreehandTool.tsx

@@ -28,7 +28,7 @@ type Props = {
 };
 
 const FreehandTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
-  const [cursorPosition, setRef] = useCursorPosition(40);
+  const [cursorPosition, setRef] = useCursorPosition(30);
 
   const [uuid, setUuid] = useState('');
   const [data, setData] = useState({

i18n.js

@@ -1,6 +1,7 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend from 'i18next-http-backend';
 
 import metaEN from './public/static/locales/en/meta.json';
 import metaTW from './public/static/locales/zh-tw/meta.json';
@@ -21,7 +22,7 @@ const resources = {
     dialog: dialogEN,
     toast: toastEN,
   },
-  zh_tw: {
+  'zh-TW': {
     meta: metaTW,
     sidebar: sidebarTW,
     toolbar: toolbarTW,
@@ -31,11 +32,16 @@ const resources = {
 };
 
 i18n
+  .use(Backend)
   .use(LanguageDetector)
   .use(initReactI18next) // passes i18n down to react-i18next
   .init({
     resources,
     lng: 'en',
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false,
+    },
   });
 
 export default i18n;

package.json

@@ -17,6 +17,7 @@
     "dayjs": "^1.8.23",
     "i18next": "^19.4.0",
     "i18next-browser-languagedetector": "^4.0.2",
+    "i18next-http-backend": "^1.0.21",
     "lodash": "^4.17.15",
     "mobile-detect": "^1.4.4",
     "next": "9.5.0",

pages/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { NextPage } from 'next';
+import { useTranslation } from 'react-i18next';
 
 import Navbar from '../containers/Navbar';
 import Sidebar from '../containers/Sidebar';
@@ -10,17 +11,25 @@ import AutoSave from '../containers/AutoSave';
 import Loading from '../containers/Loading';
 import Embed from '../components/Embed';
 
-const index: NextPage = () => (
-  <>
-    <Navbar />
-    <Sidebar />
-    <Toolbar />
-    <Placeholder />
-    <PdfViewer />
-    <AutoSave />
-    <Loading />
-    <Embed />
-  </>
-);
+const index: NextPage = () => {
+  const { i18n } = useTranslation('', { useSuspense: false });
+
+  useEffect(() => {
+    i18n.changeLanguage(window.navigator.language);
+  }, []);
+
+  return (
+    <>
+      <Navbar />
+      <Sidebar />
+      <Toolbar />
+      <Placeholder />
+      <PdfViewer />
+      <AutoSave />
+      <Loading />
+      <Embed />
+    </>
+  );
+};
 
 export default index;

yarn.lock

@@ -4997,6 +4997,13 @@ i18next-express-middleware@^1.9.1:
   dependencies:
     cookies "0.7.1"
 
+i18next-http-backend@^1.0.21:
+  version "1.0.21"
+  resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-1.0.21.tgz#cee901b3527dad5165fa91de973b6aa6404c1c37"
+  integrity sha512-UDeHoV2B+31Gr++0KFAVjM5l+SEwePpF6sfDyaDq5ennM9QNJ78PBEMPStwkreEm4h5C8sT7M1JdNQrLcU1Wdg==
+  dependencies:
+    node-fetch "2.6.1"
+
 i18next-node-fs-backend@^2.1.0:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/i18next-node-fs-backend/-/i18next-node-fs-backend-2.1.3.tgz#483fa9eda4c152d62a3a55bcae2a5727ba887559"
@@ -6690,6 +6697,11 @@ node-fetch@2.6.0:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
   integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
 
+node-fetch@2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"