Begin localization efforts (#24)

package.json

@@ -20,6 +20,7 @@
     "marked": "^1.0.0",
     "regenerator-runtime": "^0.13.5",
     "vue": "^2.6.11",
+    "vue-i18n": "^8.18.1",
     "vue-router": "^3.1.6",
     "webextension-polyfill": "^0.6.0"
   },

src/assets/lang/en.js

@@ -0,0 +1,48 @@
+export default {
+  app: {
+    about: {
+      name: "AniMouto v{version}",
+      description: "A little sister to enhance your AniList experience.",
+      links: {
+        title: "External Links",
+        anilist: "AniList",
+        anilist_desc: "This extension's onii-chan",
+        homepage: "Homepage",
+        homepage_desc: "Our homepage in case you want to share",
+        github: "GitHub",
+        github_desc: "AniMouto is open source and MIT licensed",
+      },
+      built_with: {
+        title: "Built With",
+        node: "Node.js",
+        node_desc: "Developement environment",
+        vue: "Vue.js",
+        vue_desc: "Frontend framework",
+        webpack: "Webpack",
+        webpack_desc: "Compiler to allow loading as an extension",
+        graphql: "GraphQL",
+        graphql_desc: "The AniList API query language",
+        material_design: "Material Design",
+        material_design_desc: "All the icons used",
+      },
+      changelog: "Changelog"
+    },
+    login: {
+      title: "Login with AniList to use AniMouto",
+      auth_code: "Authorization Code",
+      submit: "Login",
+      sign_up: "Sign Up",
+      get_code: "Get Code",
+      please_wait: "Once authentication is complete, the page will change.",
+      ff_instruct_1: "To obtain an authorization code, click the \"Get Code\" button above. It should open a new window that will let you authenticate with AniList. Once authenticated, it will provide an authorization code for you to copy.",
+      ff_instruct_2: "Paste your authorization code into the text field to authenticate. Don't forget to close the extra window when you finish.",
+      ff_instruct_3: "Once authentication is complete, the page will change.",
+    }
+  },
+  forum: {
+    title: "Recent Forum Activity",
+    query_fail: "Failed to get forum activity",
+    replied: "{user} replied {time} ago"
+  },
+  generic_error: "Something bad happened"
+}

src/popup/components/about/About.vue

@@ -1,26 +1,26 @@
 <template>
   <div>
-    <h1 class="section-title">AniMouto v{{ $browser.runtime.getManifest().version }}</h1>
-    <p class="subtext" style="padding-left:30px;">A little sister to enhance your AniList experience.</p>
+    <h1 class="section-title">{{ $t("app.about.name", { version: $browser.runtime.getManifest().version }) }}</h1>
+    <p class="subtext" style="padding-left:30px;">{{ $t("app.about.description") }}</p>
     <img class="animouto-icon" src="../../../assets/img/animouto.svg"/>
 
-    <h1 class="section-title">External Links</h1>
+    <h1 class="section-title">{{ $t("app.about.links.title") }}</h1>
     <div class="section link-flow">
-      <Link name="AniList" description="This extension's onii-chan" url="https://anilist.co" image="anilist.png"/>
-      <Link name="Homepage" description="Our homepage in case you want to share" url="https://animouto.moe/" image="animouto.png"/>
-      <Link name="GitHub" description="AniMouto is open source and MIT licensed" url="https://github.com/TehNut/AniMouto" image="github.png"/>
+      <Link name="anilist" section="links" url="https://anilist.co" image="anilist.png"/>
+      <Link name="homepage" section="links" url="https://animouto.moe/" image="animouto.png"/>
+      <Link name="github" section="links" url="https://github.com/TehNut/AniMouto" image="github.png"/>
     </div>
 
-    <h1 class="section-title">Technology</h1>
+    <h1 class="section-title">{{ $t("app.about.built_with.title") }}</h1>
     <div class="section link-flow">
-      <Link name="Node.js" description="Developement environment" url="https://nodejs.org/" image="node.png"/>
-      <Link name="Vue.js" description="Frontend framework" url="https://vuejs.org/" image="vue.png"/>
-      <Link name="Webpack" description="Compiler to allow loading as an extension" url="https://webpack.js.org/" image="webpack.png"/>
-      <Link name="GraphQL" description="The AniList API query language" url="https://graphql.org/" image="graphql.svg"/>
-      <Link name="Material Design" description="All the icons used" url="https://material.io/" image="material.svg"/>
+      <Link name="node" section="built_with" url="https://nodejs.org/" image="node.png"/>
+      <Link name="vue" section="built_with" url="https://vuejs.org/" image="vue.png"/>
+      <Link name="webpack" section="built_with" url="https://webpack.js.org/" image="webpack.png"/>
+      <Link name="graphql" section="built_with" url="https://graphql.org/" image="graphql.svg"/>
+      <Link name="material_design" section="built_with" url="https://material.io/" image="material.svg"/>
     </div>
 
-    <h1 class="section-title"><a href="https://github.com/TehNut/AniMouto/releases" target="_blank">Changelog</a></h1>
+    <h1 class="section-title"><a href="https://github.com/TehNut/AniMouto/releases" target="_blank">{{ $t("app.about.changelog") }}</a></h1>
     <QueryContainer :query="getChangelog" class="section changelog">
       <div slot-scope="{response}">
         <div v-for="version in getValidChanges(response)">

src/popup/components/about/Link.vue

@@ -2,11 +2,9 @@
   <a :href="url" target="_blank">
     <div class="link" :style="'background-image: url(assets/img/link/' + image + ')'">
       <span class="hover">
-        <span class="highlight">{{ name }}</span>
-        <span v-if="description">
-          <br/>
-          {{ description }}
-        </span>
+        <span class="highlight">{{ $t(`app.about.${section}.${name}`) }}</span>
+        <br/>
+        {{ $t(`app.about.${section}.${name}_desc`) }}
       </span>
     </div>
   </a>
@@ -18,8 +16,8 @@
     props: [
       "image",
       "url",
+      "section",
       "name",
-      "description"
     ]
   }
 </script>

src/popup/components/base/Error.vue

@@ -4,7 +4,7 @@
       <span style="font-size:32px;">{{ getRandomEmoji() }}</span>
       <br/>
       <slot>
-        <span>Oopsy doopsy</span>
+        <span>{{ $t("generic_error") }}</span>
       </slot>
     </div>
   </div>

src/popup/components/forum/ForumOverview.vue

@@ -3,8 +3,8 @@
     <div class="buttons">
       <i class="material-icons icon" @click="$refs.query.runQuery()">refresh</i>
     </div>
-    <h1 class="section-title"><a href="https://anilist.co/forum/overview" target="_blank">Recent Forum Activity</a></h1>
-    <QueryContainer ref="query" :query="getForum" :responsifier="res => res.data.Page.threads" error-text="Failed to get forum activity">
+    <h1 class="section-title"><a href="https://anilist.co/forum/overview" target="_blank">{{ $t("forum.title") }}</a></h1>
+    <QueryContainer ref="query" :query="getForum" :responsifier="res => res.data.Page.threads" :error-text="$t('forum.query_fail')">
       <div slot-scope="{response}">
         <span v-for="thread in response">
           <Thread :thread="thread"/>

src/popup/components/forum/Thread.vue

@@ -4,11 +4,17 @@
       <a :href="thread.siteUrl" class="highlight-hover" target="_blank">{{ thread.title }}</a>
     </div>
     <br />
-    <a :href="thread.replyUser.siteUrl" class="thread-commenter" target="_blank">
-      <img :src="thread.replyUser.avatar.medium" class="avatar forum-avatar" />
-      <span class="highlight">{{ thread.replyUser.name }}</span>
-    </a>
-    <a :href="`${thread.siteUrl}/comment/${thread.latest}`" class="highlight-hover" target="_blank">replied {{ formatTime() }} ago</a>
+    <i18n path="forum.replied" tag="a" :href="thread.latest ? `${thread.siteUrl}/comment/${thread.latest}` : thread.siteUrl" class="highlight-hover" target="_blank">
+      <template #user>
+        <a :href="thread.replyUser.siteUrl" class="thread-commenter" target="_blank">
+          <img :src="thread.replyUser.avatar.medium" class="avatar forum-avatar" />
+          <span class="highlight">{{ thread.replyUser.name }}</span>
+        </a>
+      </template>
+      <template #time>
+        <span>{{ formatTime() }}</span>
+      </template>
+    </i18n>
     <span class="thread-info no-select">
       <i class="material-icons thread-icon">visibility</i><span class="highlight-hover">{{ thread.viewCount }}</span>
       <i class="material-icons thread-icon">message</i><span class="highlight-hover">{{ thread.replyCount}}</span>

src/popup/components/login/ChromeAuthentication.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <h2 class="title">Login with AniList to use AniMouto</h2>
-    <div class="button no-select ripple" @click="handleLogin()" ref="loginButton">Login</div>
-    <a href="https://anilist.co/signup" target="_blank"><div class="button no-select ripple">Sign Up</div></a>
+    <h2 class="title">{{ $t("app.login.title") }}</h2>
+    <div class="button no-select ripple" @click="handleLogin()" ref="loginButton">{{ $t("app.login.submit") }}</div>
+    <a href="https://anilist.co/signup" target="_blank"><div class="button no-select ripple">{{ $t("app.login.sign_up") }}</div></a>
     <transition name="fade">
       <Spinner v-if="active"/>
     </transition>
     <div id="chrome-loader" class="loader" style="display:none;position:absolute;top:60px;"></div>
-    <p style="color:rgb(var(--color-text))">Once authentication is complete, the page will change.</p>
+    <p style="color:rgb(var(--color-text))">{{ $t("app.login.please_wait") }}</p>
   </div>
 </template>
 

src/popup/components/login/FirefoxAuthentication.vue

@@ -1,21 +1,21 @@
 <template>
   <div>
-    <h2 class="title">Login with AniList to use AniMouto</h2>
+    <h2 class="title">{{ $t("app.login.title") }}</h2>
 
     <div class="search-container">
-      <input v-model="token" type="text" class="text-input" ref="codeField" placeholder="Authorization Code" autocomplete="off" />
+      <input v-model="token" type="text" class="text-input" ref="codeField" :placeholder="$t('app.login.auth_code')" autocomplete="off" />
     </div>
 
-    <div class="button no-select ripple" @click="getCode()" style="background:rgb(var(--color-orange))" ref="codeButton">Get Code</div>
-    <div class="button no-select ripple" @click="handleLogin()" ref="loginButton">Login</div>
-    <a href="https://anilist.co/signup" target="_blank"><div class="button no-select ripple">Sign Up</div></a>
+    <div class="button no-select ripple" @click="getCode()" style="background:rgb(var(--color-orange))" ref="codeButton">{{ $t("app.login.get_code") }}</div>
+    <div class="button no-select ripple" @click="handleLogin()" ref="loginButton">{{ $t("app.login.submit") }}</div>
+    <a href="https://anilist.co/signup" target="_blank"><div class="button no-select ripple">{{ $t("app.login.sign_up") }}</div></a>
     <transition name="fade">
       <Spinner v-if="active"/>
     </transition>
     <div id="chrome-loader" class="loader" style="display:none;position:absolute;top:60px;"></div>
-    <p style="color:rgb(var(--color-text))">To obtain an authorization code, click the "Get Code" button above. It should open a new window that will let you authenticate with AniList. Once authenticated, it will provide an authorization code for you to copy.</p>
-    <p style="color:rgb(var(--color-text))">Paste your authorization code into the text field to authenticate. Don't forget to close the extra window when you finish.</p>
-    <p style="color:rgb(var(--color-text))">Once authentication is complete, the page will change.</p>
+    <p style="color:rgb(var(--color-text))">{{ $t("app.login.ff_instruct_1") }}</p>
+    <p style="color:rgb(var(--color-text))">{{ $t("app.login.ff_instruct_2") }}</p>
+    <p style="color:rgb(var(--color-text))">{{ $t("app.login.ff_instruct_3") }}</p>
   </div>
 </template>
 

src/popup/popup.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
+import VueI18n from "vue-i18n";
 import App from "./App";
 import Login from "./components/login/Login"
 import MediaList from "./components/medialist/MediaList";
@@ -10,8 +11,10 @@ import Spinner from "./components/base/Spinner";
 import MediaView from "./components/media/MediaView";
 import ForumOverview from "./components/forum/ForumOverview";
 import About from "./components/about/About";
+import enLang from "../assets/lang/en";
 
 Vue.use(VueRouter);
+Vue.use(VueI18n);
 
 const router = new VueRouter({
   routes: [
@@ -56,12 +59,21 @@ const router = new VueRouter({
   ]
 });
 
+const i18n = new VueI18n({
+  locale: "en",
+  fallbackLocale: "en",
+  messages: {
+    en: enLang
+  }
+});
+
 global.browser = require('webextension-polyfill');
 Vue.prototype.$browser = global.browser;
 
 /* eslint-disable no-new */
 export default new Vue({
   el: '#app',
+  i18n,
   router,
   render: h => h(App)
 });