🎉 Basic i18n support

2019-11-27 14:15:11 +05:30
parent c4c320da83
commit 2697cce6dd
11 changed files with 153 additions and 36 deletions
--- a/components/collections/index.vue
+++ b/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 {
--- a/components/history.vue
+++ b/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;
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -0,0 +1,3 @@
+export default {
+  send: 'Send'
+}
--- a/lang/es-ES.js
+++ b/lang/es-ES.js
@@ -0,0 +1,3 @@
+export default {
+  send: 'Enviar'
+}
--- a/layouts/default.vue
+++ b/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 -->
-      <p class="align-center mono">
-        <span v-if="version.name">
-          <a
-            v-bind:href="
-              'https://github.com/liyasthomas/postwoman/releases/tag/' +
-                version.name
-            "
-            target="_blank"
-            rel="noopener"
-            >{{ version.name }}</a
-          >
-          <!-- <span v-if="version.hash">
-            -
+      <div class="flex-wrap">
+        <!-- Bottom section of footer: version/author information -->
+        <div>
+          <span v-if="version.name" class="mono">
            <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> -->
-          <!-- <span v-if="version.variant">({{version.variant}})</span> -->
-          &#x2022;
-        </span>
-        <a href="https://liyasthomas.web.app" target="_blank" rel="noopener"
-          >🦄</a
-        >
-        &#x2022;
-        <a href="https://postwoman.launchaco.com" target="_blank" rel="noopener"
-          >Subscribe</a
-        >
-      </p>
+            >
+              {{ version.name }}
+            </a>
+            &#x2022;
+            <a
+              href="https://liyasthomas.web.app"
+              target="_blank"
+              rel="noopener"
+            >
+              🦄
+            </a>
+            <!-- <span v-if="version.hash">
+              -
+              <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>
--- a/nuxt.config.js
+++ b/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
   */
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/pages/graphql.vue
+++ b/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>
--- a/pages/index.vue
+++ b/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>
--- a/pages/settings.vue
+++ b/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 || ""
      }
    };