refs #151 Add vue-i18next and translate side menu

package-lock.json

@@ -183,6 +183,21 @@
       "integrity": "sha512-LAQ1d4OPfSJ/BMbI2DuizmYrrkD9JMaTdi2hQTlI53lQ4kRQPyZQRS4CYQ7O66bnBBnP/oYdRxbk++X0xuFU6A==",
       "dev": true
     },
+    "@panter/vue-i18next": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@panter/vue-i18next/-/vue-i18next-0.12.0.tgz",
+      "integrity": "sha1-SHXDjUW36kzk6HbWCFQWEnuGa0Y=",
+      "requires": {
+        "deepmerge": "2.1.1"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.1.1.tgz",
+          "integrity": "sha512-urQxA1smbLZ2cBbXbaYObM1dJ82aJ2H57A1C/Kklfh/ZN1bgH4G/n5KWhdNfOK11W98gqZfyYj7W4frJJRwA2w=="
+        }
+      }
+    },
     "@trodi/electron-splashscreen": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@trodi/electron-splashscreen/-/electron-splashscreen-0.3.1.tgz",
@@ -3403,11 +3418,6 @@
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
       "dev": true
     },
-    "coffeescript": {
-      "version": "1.12.7",
-      "resolved": "https://registry.npmjs.org/coffeescript/-/coffeescript-1.12.7.tgz",
-      "integrity": "sha512-pLXHFxQMPklVoEekowk8b3erNynC+DVJzChxS/LCBBgR6/8AJkHivkm//zbowcfc7BTCAjryuhx6gPqPRfsFoA=="
-    },
     "collapse-white-space": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.4.tgz",
@@ -4026,14 +4036,6 @@
       "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=",
       "dev": true
     },
-    "cson-parser": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cson-parser/-/cson-parser-3.0.0.tgz",
-      "integrity": "sha512-khmLtNmwe6SSlWz5vrhay9yWd/Fwwyiel+vt+1vIcCT9AsdqNuLXuK9tYhhAw1FdSSHjLc56PW8xa565/x73XQ==",
-      "requires": {
-        "coffeescript": "1.12.7"
-      }
-    },
     "css": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/css/-/css-2.2.3.tgz",
@@ -8849,32 +8851,6 @@
       "resolved": "https://registry.npmjs.org/i18next/-/i18next-11.5.0.tgz",
       "integrity": "sha512-PM2G3iY1LoHonDwygLT9xyBAINuHujXnisnrib7RXdLtE9Tb1dT8RKXwWB+MCl9VOcM5rJwWO9iLw/3KftVEoA=="
     },
-    "i18next-node-fs-backend": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/i18next-node-fs-backend/-/i18next-node-fs-backend-1.2.1.tgz",
-      "integrity": "sha512-lMd/tWsdgDFb158FwXHff63WZpTXggO3j8YOFEko+EvzRPzoIWkvfqdU5Oogn/p4nYfOMnCeEns29ksPF6rZBQ==",
-      "requires": {
-        "cson-parser": "3.0.0",
-        "js-yaml": "3.5.4",
-        "json5": "0.5.0"
-      },
-      "dependencies": {
-        "js-yaml": {
-          "version": "3.5.4",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.5.4.tgz",
-          "integrity": "sha1-9k8W3NeL65zoNhBo5zPr5HsHkXk=",
-          "requires": {
-            "argparse": "1.0.10",
-            "esprima": "2.7.3"
-          }
-        },
-        "json5": {
-          "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.0.tgz",
-          "integrity": "sha1-myBxWwJsvjd4/Xae3M2CLYMypbI="
-        }
-      }
-    },
     "i18next-sync-fs-backend": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/i18next-sync-fs-backend/-/i18next-sync-fs-backend-1.1.0.tgz",

package.json

@@ -91,6 +91,7 @@
     }
   },
   "dependencies": {
+    "@panter/vue-i18next": "^0.12.0",
     "@trodi/electron-splashscreen": "^0.3.1",
     "about-window": "^1.11.0",
     "animate.css": "^3.6.1",
@@ -105,7 +106,6 @@
     "hawk": "^7.0.7",
     "hoek": "^5.0.3",
     "i18next": "^11.5.0",
-    "i18next-node-fs-backend": "^1.2.1",
     "i18next-sync-fs-backend": "^1.1.0",
     "is-empty": "^1.2.0",
     "lodash": "^4.17.10",

src/config/i18n.js

@@ -4,6 +4,7 @@ import Backend from 'i18next-sync-fs-backend'
 
 const options = {
   initImmediate: false,
+  lng: 'ja',
   backend: {
     // path where resources get loaded from
     loadPath: path.resolve(__dirname, './locales/{{lng}}/{{ns}}.json'),

src/config/locales/en/translation.json

@@ -33,5 +33,16 @@
       "minimize": "Minimize",
       "jump_to": "Jump to"
     }
+  },
+  "side_menu": {
+    "edit_profile": "Edit profile",
+    "home": "Home",
+    "notification": "Notification",
+    "favourite": "Favourite",
+    "local": "Local timeline",
+    "public": "Public timeline",
+    "hashtag": "Hashtag",
+    "search": "Search",
+    "lists": "Lists"
   }
 }

src/config/locales/ja/translation.json

@@ -33,5 +33,16 @@
       "minimize": "縮小",
       "jump_to": "ジャンプ"
     }
+  },
+  "side_menu": {
+    "edit_profile": "編集",
+    "home": "ホーム",
+    "notification": "通知",
+    "favourite": "お気に入り",
+    "local": "ローカルタイムライン",
+    "public": "連合タイムライン",
+    "hashtag": "ハッシュタグ",
+    "search": "検索",
+    "lists": "リスト"
   }
 }

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -11,7 +11,7 @@
               <i class="el-icon-arrow-down el-icon--right"></i>
             </span>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="edit">Edit profile</el-dropdown-item>
+              <el-dropdown-item command="edit">{{ $t("side_menu.edit_profile") }}</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>
@@ -36,41 +36,41 @@
       :class="collapse ? 'el-menu-vertical timeline-menu narrow-menu':'el-menu-vertical timeline-menu'">
       <el-menu-item :index="`/${id()}/home`">
         <icon name="home"></icon>
-        <span>Home</span>
+        <span>{{ $t("side_menu.home") }}</span>
         <el-badge is-dot :hidden="!unreadHomeTimeline">
         </el-badge>
       </el-menu-item>
       <el-menu-item :index="`/${id()}/notifications`">
         <icon name="bell"></icon>
-        <span>Notification</span>
+        <span>{{ $t("side_menu.notification") }}</span>
         <el-badge is-dot :hidden="!unreadNotifications">
         </el-badge>
       </el-menu-item>
       <el-menu-item :index="`/${id()}/favourites`">
         <icon name="star"></icon>
-        <span>Favourite</span>
+        <span>{{ $t("side_menu.favourite") }}</span>
       </el-menu-item>
       <el-menu-item :index="`/${id()}/local`">
         <icon name="users"></icon>
-        <span>Local timeline</span>
+        <span>{{ $t("side_menu.local") }}</span>
         <el-badge is-dot :hidden="!unreadLocalTimeline">
         </el-badge>
       </el-menu-item>
       <el-menu-item :index="`/${id()}/public`">
         <icon name="globe"></icon>
-        <span>Public timeline</span>
+        <span>{{ $t("side_menu.public") }}</span>
       </el-menu-item>
       <el-menu-item :index="`/${id()}/hashtag`">
         <icon name="hashtag"></icon>
-        <span>Hashtag</span>
+        <span>{{ $t("side_menu.hashtag") }}</span>
       </el-menu-item>
       <el-menu-item :index="`/${id()}/search`">
         <icon name="search"></icon>
-        <span>Search</span>
+        <span>{{ $t("side_menu.search") }}</span>
       </el-menu-item>
       <el-menu-item :index="`/${id()}/lists`">
         <icon name="list-ul"></icon>
-        <span>Lists</span>
+        <span>{{ $t("side_menu.lists") }}</span>
       </el-menu-item>
       <template v-for="list in lists">
         <el-menu-item :index="`/${id()}/lists/${list.id}`" class="sub-menu" v-bind:key="list.id">

src/renderer/main.js

@@ -8,14 +8,17 @@ import Popper from 'vue-popperjs'
 import 'vue-popperjs/dist/css/vue-popper.css'
 import { sync } from 'vuex-router-sync'
 import shortkey from 'vue-shortkey'
+import VueI18Next from '@panter/vue-i18next'
 
 import './assets/fonts/fonts.css'
 import App from './App'
 import router from './router'
 import store from './store'
+import i18next from '../config/i18n'
 
 Vue.use(ElementUI)
 Vue.use(shortkey)
+Vue.use(VueI18Next)
 Vue.component('icon', Icon)
 Vue.component('popper', Popper)
 
@@ -25,9 +28,12 @@ if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 Vue.http = Vue.prototype.$http = axios
 Vue.config.productionTip = false
 
+const i18n = new VueI18Next(i18next)
+
 /* eslint-disable no-new */
 new Vue({
   components: { App },
+  i18n: i18n,
   router,
   store,
   template: '<App/>'