🎉 Basic i18n support

components/collections/index.vue

@@ -96,7 +96,7 @@ TODO:
 
 <style lang="scss" scoped>
 .virtual-list {
-  max-height: calc(100vh - 204px);
+  max-height: calc(100vh - 232px);
 }
 
 ul {

components/history.vue

@@ -260,7 +260,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 265px);
+  max-height: calc(100vh - 284px);
 
   [readonly] {
     cursor: default;

lang/en-US.js

@@ -0,0 +1,3 @@
+export default {
+  send: 'Send'
+}

lang/es-ES.js

@@ -0,0 +1,3 @@
+export default {
+  send: 'Enviar'
+}

layouts/default.vue

@@ -36,7 +36,7 @@
             <i class="material-icons">offline_bolt</i>
           </button>
           <v-popover>
-            <button class="tooltip-target icon" v-tooltip="'More'">
+            <button class="icon" v-tooltip="'More'">
               <i class="material-icons">more_vert</i>
             </button>
             <template slot="popover">
@@ -198,37 +198,69 @@
       </div>
     </div>
     <footer class="footer">
-      <!-- Bottom section of footer: version/author information -->
+      <div class="flex-wrap">
-      <p class="align-center mono">
+        <!-- Bottom section of footer: version/author information -->
-        <span v-if="version.name">
+        <div>
-          <a
+          <span v-if="version.name" class="mono">
-            v-bind:href="
-              'https://github.com/liyasthomas/postwoman/releases/tag/' +
-                version.name
-            "
-            target="_blank"
-            rel="noopener"
-            >{{ version.name }}</a
-          >
-          <!-- <span v-if="version.hash">
-            -
             <a
-              v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
+              v-bind:href="
+                'https://github.com/liyasthomas/postwoman/releases/tag/' +
+                  version.name
+              "
               target="_blank"
               rel="noopener"
-            >{{version.hash}}</a>
+            >
-          </span> -->
+              {{ version.name }}
-          <!-- <span v-if="version.variant">({{version.variant}})</span> -->
+            </a>
-          &#x2022;
+            &#x2022;
-        </span>
+            <a
-        <a href="https://liyasthomas.web.app" target="_blank" rel="noopener"
+              href="https://liyasthomas.web.app"
-          >🦄</a
+              target="_blank"
-        >
+              rel="noopener"
-        &#x2022;
+            >
-        <a href="https://postwoman.launchaco.com" target="_blank" rel="noopener"
+              🦄
-          >Subscribe</a
+            </a>
-        >
+            <!-- <span v-if="version.hash">
-      </p>
+              -
+              <a
+                v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
+                target="_blank"
+                rel="noopener"
+              >{{version.hash}}</a>
+            </span> -->
+            <!-- <span v-if="version.variant">({{version.variant}})</span> -->
+          </span>
+        </div>
+        <div class="flex-wrap">
+          <a
+            href="https://postwoman.launchaco.com"
+            target="_blank"
+            rel="noopener"
+          >
+            <button class="icon" v-tooltip="'Subscribe'">
+              <i class="material-icons">email</i>
+            </button>
+          </a>
+          <v-popover>
+            <button class="icon" v-tooltip="'Choose Language'">
+              <i class="material-icons">translate</i>
+            </button>
+            <template slot="popover">
+              <nuxt-link
+                v-for="locale in availableLocales"
+                :key="locale.code"
+                :to="switchLocalePath(locale.code)"
+              >
+                <div>
+                  <button class="icon" v-close-popover>
+                    {{ locale.name }}
+                  </button>
+                </div>
+              </nuxt-link>
+            </template>
+          </v-popover>
+        </div>
+      </div>
     </footer>
     <modal v-if="showShortcuts" @close="showShortcuts = false">
       <div slot="header">
@@ -440,6 +472,12 @@ export default {
     $route() {
       this.$toast.clear();
     }
+  },
+
+  computed: {
+    availableLocales() {
+      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale);
+    }
   }
 };
 </script>

nuxt.config.js

@@ -228,7 +228,8 @@ export default {
     ['@nuxtjs/google-tag-manager', {
       id: process.env.GTM_ID || 'GTM-MXWD8NQ'
     }],
-    ['@nuxtjs/robots']
+    ['@nuxtjs/robots'],
+    ['nuxt-i18n']
   ],
   pwa: {
     manifest: {
@@ -277,6 +278,24 @@ export default {
     Allow: '/',
     Sitemap: 'https://postwoman.io/sitemap.xml'
   },
+  i18n: {
+    locales: [{
+        code: 'en',
+        name: 'English',
+        iso: 'en-US',
+        file: 'en-US.js'
+      },
+      {
+        code: 'es',
+        name: 'Español',
+        iso: 'es-ES',
+        file: 'es-ES.js'
+      }
+    ],
+    defaultLocale: 'en',
+    lazy: true,
+    langDir: 'lang/'
+  },
   /*
    ** Build configuration
    */

package-lock.json

@@ -910,6 +910,15 @@
                 "@hapi/hoek": "^8.3.0"
             }
         },
+        "@kazupon/vue-i18n-loader": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/@kazupon/vue-i18n-loader/-/vue-i18n-loader-0.4.1.tgz",
+            "integrity": "sha512-hVznmhnyoUKozGY7pwq/UtPL76UDzb+aiN2YksZZIzCY/MkEqih0MSyEmTGw7+HVWzJRPAlDyoRNR4tWKmkCRw==",
+            "requires": {
+                "js-yaml": "^3.13.1",
+                "json5": "^2.1.0"
+            }
+        },
         "@nuxt/babel-preset-app": {
             "version": "2.10.2",
             "resolved": "https://registry.npmjs.org/@nuxt/babel-preset-app/-/babel-preset-app-2.10.2.tgz",
@@ -5912,6 +5921,11 @@
             "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==",
             "dev": true
         },
+        "js-cookie": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+            "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+        },
         "js-levenshtein": {
             "version": "1.1.6",
             "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -7245,6 +7259,28 @@
                 "@nuxt/webpack": "2.10.2"
             }
         },
+        "nuxt-i18n": {
+            "version": "6.4.0",
+            "resolved": "https://registry.npmjs.org/nuxt-i18n/-/nuxt-i18n-6.4.0.tgz",
+            "integrity": "sha512-1JQBL0Jn8G7ZialCa8S3HxgokM2Rqa68RtyPB4oT6Og58oN1d2OreZsQhNITLYdPn3hTOqTO+i55cdOs7AW5sw==",
+            "requires": {
+                "@babel/parser": "^7.5.5",
+                "@babel/traverse": "^7.5.5",
+                "@kazupon/vue-i18n-loader": "^0.4.0",
+                "cookie": "^0.4.0",
+                "is-https": "^1.0.0",
+                "js-cookie": "^2.2.0",
+                "vue-i18n": "^8.12.0",
+                "vue-i18n-extensions": "^0.2.1"
+            },
+            "dependencies": {
+                "cookie": {
+                    "version": "0.4.0",
+                    "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+                    "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+                }
+            }
+        },
         "oauth-sign": {
             "version": "0.9.0",
             "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
@@ -10953,6 +10989,16 @@
             "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
             "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
         },
+        "vue-i18n": {
+            "version": "8.15.0",
+            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.15.0.tgz",
+            "integrity": "sha512-juJ/avAP39bOMycC+qQDLJ8U9z9LtLF/9PsRoJLBSfsYZo9bqYntyyX5QPicwlb1emJKjgxhZ3YofHiQcXBu0Q=="
+        },
+        "vue-i18n-extensions": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/vue-i18n-extensions/-/vue-i18n-extensions-0.2.1.tgz",
+            "integrity": "sha512-xBrItI7bEwBnG7eAlnyUARP41JYYn2+ABMR8q1Yh5FM9hHCbs4XPZwG+4+FPeIZ6b5gYk4YUP//m+fWiuU9z9A=="
+        },
         "vue-loader": {
             "version": "15.7.1",
             "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.7.1.tgz",

package.json

@@ -28,6 +28,7 @@
         "ace-builds": "^1.4.7",
         "graphql": "^14.5.8",
         "nuxt": "^2.10.2",
+        "nuxt-i18n": "^6.4.0",
         "v-tooltip": "^2.0.2",
         "vue-virtual-scroll-list": "^1.4.3",
         "vuejs-auto-complete": "^0.9.0",

pages/graphql.vue

@@ -224,7 +224,7 @@
 
 <style scoped lang="scss">
 .tab {
-  max-height: calc(100vh - 172px);
+  max-height: calc(100vh - 186px);
   overflow: auto;
 }
 </style>

pages/index.vue

@@ -97,7 +97,7 @@
                   id="send"
                   ref="sendButton"
                 >
-                  Send
+                  {{ $t("send") }}
                   <span id="hidden-message">Again</span>
                   <span>
                     <i class="material-icons">send</i>

pages/settings.vue

@@ -92,7 +92,12 @@
               <i class="material-icons">clear_all</i>
             </button>
           </div>
-          <input id="url" type="url" v-model="settings.PROXY_URL" :disabled="!settings.PROXY_ENABLED">
+          <input
+            id="url"
+            type="url"
+            v-model="settings.PROXY_URL"
+            :disabled="!settings.PROXY_ENABLED"
+          />
         </li>
       </ul>
       <ul class="info">
@@ -231,7 +236,9 @@ export default {
           this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false,
         PROXY_ENABLED:
           this.$store.state.postwoman.settings.PROXY_ENABLED || false,
-        PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || "https://postwoman.apollotv.xyz/",
+        PROXY_URL:
+          this.$store.state.postwoman.settings.PROXY_URL ||
+          "https://postwoman.apollotv.xyz/",
         PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
       }
     };