grim/devweb

Set i18n
draft
2020-07-16, Gary Kramlich
0bbebc2e7606
Parents 31c7ef6bc676
Children bacc8aeab2fe
Set i18n
9 files changed, 306 insertions(+), 6 deletions(-)
  • +2 -1
    Makefile
  • +2 -0
    frontend/.env
  • +246 -0
    frontend/package-lock.json
  • +7 -2
    frontend/package.json
  • +11 -2
    frontend/src/components/Navigation.vue
  • +23 -0
    frontend/src/i18n.js
  • +1 -0
    frontend/src/locales/en.json
  • +4 -1
    frontend/src/main.js
  • +10 -0
    frontend/vue.config.js
    • --- a/Makefile Thu Jul 16 18:31:40 2020 -0500
    +++ b/Makefile Thu Jul 16 19:03:10 2020 -0500
    @@ -2,7 +2,8 @@
    CLEAN_FILES := \
    db/scheme/embedded.go \
    - devweb
    + devweb \
    + frontend/embedded.go
    CLEAN_DIRS := \
    frontend/dist
    --- /dev/null Thu Jan 01 00:00:00 1970 +0000
    +++ b/frontend/.env Thu Jul 16 19:03:10 2020 -0500
    @@ -0,0 +1,2 @@
    +VUE_APP_I18N_LOCALE=en
    +VUE_APP_I18N_FALLBACK_LOCALE=en
    --- a/frontend/package-lock.json Thu Jul 16 18:31:40 2020 -0500
    +++ b/frontend/package-lock.json Thu Jul 16 19:03:10 2020 -0500
    @@ -1053,6 +1053,26 @@
    "postcss": "^7.0.0"
    }
    },
    + "@intlify/vue-i18n-loader": {
    + "version": "1.0.0",
    + "resolved": "https://registry.npmjs.org/@intlify/vue-i18n-loader/-/vue-i18n-loader-1.0.0.tgz",
    + "integrity": "sha512-y7LlpKEQ01u7Yq14l4VNlbFYEHMmSEH1QXXASOMWspj9ZcIdCebhhvHCHqk5Oy5Epw3PtoxyRJNpb6Wle5udgA==",
    + "dev": true,
    + "requires": {
    + "js-yaml": "^3.13.1",
    + "json5": "^2.1.1"
    + }
    + },
    + "@kazupon/vue-i18n-loader": {
    + "version": "0.5.0",
    + "resolved": "https://registry.npmjs.org/@kazupon/vue-i18n-loader/-/vue-i18n-loader-0.5.0.tgz",
    + "integrity": "sha512-Tp2mXKemf9/RBhI9CW14JjR9oKjL2KH7tV6S0eKEjIBuQBAOFNuPJu3ouacmz9hgoXbNp+nusw3MVQmxZWFR9g==",
    + "dev": true,
    + "requires": {
    + "js-yaml": "^3.13.1",
    + "json5": "^2.1.1"
    + }
    + },
    "@mrmlnc/readdir-enhanced": {
    "version": "2.2.1",
    "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
    @@ -3060,6 +3080,50 @@
    "integrity": "sha512-Xs2Hf2nzrvJMFKimOR7YR0QwZ8fc0u98kdtwN1eNAZzNQgH3vK2pXzff6GJtKh7S5hoJ87ECiAiZFS2fb5Ii2w==",
    "dev": true
    },
    + "cli-table3": {
    + "version": "0.5.1",
    + "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.5.1.tgz",
    + "integrity": "sha512-7Qg2Jrep1S/+Q3EceiZtQcDPWxhAvBw+ERf1162v4sikJrvojMHFqXt8QIVha8UlH9rgU0BeWPytZ9/TzYqlUw==",
    + "dev": true,
    + "requires": {
    + "colors": "^1.1.2",
    + "object-assign": "^4.1.0",
    + "string-width": "^2.1.1"
    + },
    + "dependencies": {
    + "ansi-regex": {
    + "version": "3.0.0",
    + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
    + "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
    + "dev": true
    + },
    + "is-fullwidth-code-point": {
    + "version": "2.0.0",
    + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
    + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
    + "dev": true
    + },
    + "string-width": {
    + "version": "2.1.1",
    + "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
    + "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
    + "dev": true,
    + "requires": {
    + "is-fullwidth-code-point": "^2.0.0",
    + "strip-ansi": "^4.0.0"
    + }
    + },
    + "strip-ansi": {
    + "version": "4.0.0",
    + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
    + "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
    + "dev": true,
    + "requires": {
    + "ansi-regex": "^3.0.0"
    + }
    + }
    + }
    + },
    "cli-width": {
    "version": "3.0.0",
    "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
    @@ -3165,6 +3229,13 @@
    "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==",
    "dev": true
    },
    + "colors": {
    + "version": "1.4.0",
    + "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
    + "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
    + "dev": true,
    + "optional": true
    + },
    "combined-stream": {
    "version": "1.0.8",
    "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
    @@ -4210,6 +4281,16 @@
    "domelementtype": "1"
    }
    },
    + "dot-object": {
    + "version": "1.9.0",
    + "resolved": "https://registry.npmjs.org/dot-object/-/dot-object-1.9.0.tgz",
    + "integrity": "sha512-7MPN6y7XhAO4vM4eguj5+5HNKLjJYfkVG1ZR1Aput4Q4TR6SYeSjhpVQ77IzJHoSHffKbDxBC+48aCiiRurDPw==",
    + "dev": true,
    + "requires": {
    + "commander": "^2.20.0",
    + "glob": "^7.1.4"
    + }
    + },
    "dot-prop": {
    "version": "5.2.0",
    "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz",
    @@ -4588,6 +4669,12 @@
    "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
    "dev": true
    },
    + "esm": {
    + "version": "3.2.25",
    + "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
    + "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
    + "dev": true
    + },
    "espree": {
    "version": "6.2.1",
    "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
    @@ -5108,6 +5195,23 @@
    "locate-path": "^3.0.0"
    }
    },
    + "flat": {
    + "version": "5.0.0",
    + "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.0.tgz",
    + "integrity": "sha512-6KSMM+cHHzXC/hpldXApL2S8Uz+QZv+tq5o/L0KQYleoG+GcwrnIJhTWC7tCOiKQp8D/fIvryINU1OZCCwevjA==",
    + "dev": true,
    + "requires": {
    + "is-buffer": "~2.0.4"
    + },
    + "dependencies": {
    + "is-buffer": {
    + "version": "2.0.4",
    + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
    + "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==",
    + "dev": true
    + }
    + }
    + },
    "flat-cache": {
    "version": "2.0.1",
    "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
    @@ -6319,6 +6423,12 @@
    "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
    "dev": true
    },
    + "is-valid-glob": {
    + "version": "1.0.0",
    + "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-1.0.0.tgz",
    + "integrity": "sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao=",
    + "dev": true
    + },
    "is-windows": {
    "version": "1.0.2",
    "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
    @@ -10533,6 +10643,39 @@
    "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
    "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
    },
    + "vue-cli-plugin-i18n": {
    + "version": "1.0.1",
    + "resolved": "https://registry.npmjs.org/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-1.0.1.tgz",
    + "integrity": "sha512-sLo6YzudaWgn5dOMvrKixE5bb/onYGxcxm+0YexqoOx0QtR+7hZ/P5WPFBMM9v/2i1ec2YYe2PvKTBel7KE+tA==",
    + "dev": true,
    + "requires": {
    + "debug": "^4.1.0",
    + "deepmerge": "^4.2.0",
    + "dotenv": "^8.2.0",
    + "flat": "^5.0.0",
    + "rimraf": "^3.0.0",
    + "vue": "^2.6.11",
    + "vue-i18n": "^8.17.0",
    + "vue-i18n-extract": "1.0.2"
    + },
    + "dependencies": {
    + "deepmerge": {
    + "version": "4.2.2",
    + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
    + "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
    + "dev": true
    + },
    + "rimraf": {
    + "version": "3.0.2",
    + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
    + "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
    + "dev": true,
    + "requires": {
    + "glob": "^7.1.3"
    + }
    + }
    + }
    + },
    "vue-eslint-parser": {
    "version": "7.1.0",
    "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz",
    @@ -10570,6 +10713,109 @@
    "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
    "dev": true
    },
    + "vue-i18n": {
    + "version": "8.18.2",
    + "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.18.2.tgz",
    + "integrity": "sha512-0X5nBTCZAVjlwcrPaYJwNs3iipBBTv0AUHwQUOa8yP3XbQGWKbRHqBb3OhCYtum/IHDD21d/df5Xd2VgyxbxfA=="
    + },
    + "vue-i18n-extract": {
    + "version": "1.0.2",
    + "resolved": "https://registry.npmjs.org/vue-i18n-extract/-/vue-i18n-extract-1.0.2.tgz",
    + "integrity": "sha512-+zwDKvle4KcfloXZnj5hF01ViKDiFr5RMx5507D7oyDXpSleRpekF5YHgZa/+Ra6Go68//z0Nya58J9tKFsCjw==",
    + "dev": true,
    + "requires": {
    + "cli-table3": "^0.5.1",
    + "dot-object": "^1.7.1",
    + "esm": "^3.2.13",
    + "glob": "^7.1.3",
    + "is-valid-glob": "^1.0.0",
    + "yargs": "^13.2.2"
    + },
    + "dependencies": {
    + "cliui": {
    + "version": "5.0.0",
    + "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
    + "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
    + "dev": true,
    + "requires": {
    + "string-width": "^3.1.0",
    + "strip-ansi": "^5.2.0",
    + "wrap-ansi": "^5.1.0"
    + }
    + },
    + "emoji-regex": {
    + "version": "7.0.3",
    + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
    + "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
    + "dev": true
    + },
    + "is-fullwidth-code-point": {
    + "version": "2.0.0",
    + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
    + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
    + "dev": true
    + },
    + "string-width": {
    + "version": "3.1.0",
    + "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
    + "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
    + "dev": true,
    + "requires": {
    + "emoji-regex": "^7.0.1",
    + "is-fullwidth-code-point": "^2.0.0",
    + "strip-ansi": "^5.1.0"
    + }
    + },
    + "strip-ansi": {
    + "version": "5.2.0",
    + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
    + "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
    + "dev": true,
    + "requires": {
    + "ansi-regex": "^4.1.0"
    + }
    + },
    + "wrap-ansi": {
    + "version": "5.1.0",
    + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
    + "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
    + "dev": true,
    + "requires": {
    + "ansi-styles": "^3.2.0",
    + "string-width": "^3.0.0",
    + "strip-ansi": "^5.0.0"
    + }
    + },
    + "yargs": {
    + "version": "13.3.2",
    + "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
    + "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
    + "dev": true,
    + "requires": {
    + "cliui": "^5.0.0",
    + "find-up": "^3.0.0",
    + "get-caller-file": "^2.0.1",
    + "require-directory": "^2.1.1",
    + "require-main-filename": "^2.0.0",
    + "set-blocking": "^2.0.0",
    + "string-width": "^3.0.0",
    + "which-module": "^2.0.0",
    + "y18n": "^4.0.0",
    + "yargs-parser": "^13.1.2"
    + }
    + },
    + "yargs-parser": {
    + "version": "13.1.2",
    + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
    + "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
    + "dev": true,
    + "requires": {
    + "camelcase": "^5.0.0",
    + "decamelize": "^1.2.0"
    + }
    + }
    + }
    + },
    "vue-loader": {
    "version": "15.9.3",
    "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.3.tgz",
    --- a/frontend/package.json Thu Jul 16 18:31:40 2020 -0500
    +++ b/frontend/package.json Thu Jul 16 19:03:10 2020 -0500
    @@ -5,20 +5,25 @@
    "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    - "lint": "vue-cli-service lint"
    + "lint": "vue-cli-service lint",
    + "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
    },
    "dependencies": {
    "bootstrap-vue": "^2.15.0",
    "core-js": "^3.6.5",
    - "vue": "^2.6.11"
    + "vue": "^2.6.11",
    + "vue-i18n": "^8.18.2"
    },
    "devDependencies": {
    + "@intlify/vue-i18n-loader": "^1.0.0",
    + "@kazupon/vue-i18n-loader": "^0.5.0",
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    + "vue-cli-plugin-i18n": "~1.0.1",
    "vue-template-compiler": "^2.6.11"
    },
    "eslintConfig": {
    --- a/frontend/src/components/Navigation.vue Thu Jul 16 18:31:40 2020 -0500
    +++ b/frontend/src/components/Navigation.vue Thu Jul 16 19:03:10 2020 -0500
    @@ -1,7 +1,7 @@
    <template>
    <b-tabs>
    - <b-tab title="Books" active>Books</b-tab>
    - <b-tab title="Search">Search</b-tab>
    + <b-tab :title="$t('books')" active>Books</b-tab>
    + <b-tab :title="$t('search')">Search</b-tab>
    </b-tabs>
    </template>
    @@ -10,3 +10,12 @@
    name: 'Navigation'
    }
    </script>
    +
    +<i18n>
    +{
    + "en": {
    + "books": "Books",
    + "search": "Search"
    + }
    +}
    +</i18n>
    \ No newline at end of file
    --- /dev/null Thu Jan 01 00:00:00 1970 +0000
    +++ b/frontend/src/i18n.js Thu Jul 16 19:03:10 2020 -0500
    @@ -0,0 +1,23 @@
    +import Vue from 'vue'
    +import VueI18n from 'vue-i18n'
    +
    +Vue.use(VueI18n)
    +
    +function loadLocaleMessages () {
    + const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
    + const messages = {}
    + locales.keys().forEach(key => {
    + const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    + if (matched && matched.length > 1) {
    + const locale = matched[1]
    + messages[locale] = locales(key)
    + }
    + })
    + return messages
    +}
    +
    +export default new VueI18n({
    + locale: process.env.VUE_APP_I18N_LOCALE || 'en',
    + fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
    + messages: loadLocaleMessages()
    +})
    --- /dev/null Thu Jan 01 00:00:00 1970 +0000
    +++ b/frontend/src/locales/en.json Thu Jul 16 19:03:10 2020 -0500
    @@ -0,0 +1,1 @@
    +{}
    \ No newline at end of file
    --- a/frontend/src/main.js Thu Jul 16 18:31:40 2020 -0500
    +++ b/frontend/src/main.js Thu Jul 16 19:03:10 2020 -0500
    @@ -1,5 +1,7 @@
    +// basics
    import Vue from 'vue'
    import App from './App.vue'
    +import i18n from './i18n'
    import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
    @@ -12,5 +14,6 @@
    Vue.use(IconsPlugin)
    new Vue({
    - render: h => h(App),
    + i18n,
    + render: h => h(App)
    }).$mount('#app')
    --- /dev/null Thu Jan 01 00:00:00 1970 +0000
    +++ b/frontend/vue.config.js Thu Jul 16 19:03:10 2020 -0500
    @@ -0,0 +1,10 @@
    +module.exports = {
    + pluginOptions: {
    + i18n: {
    + locale: 'en',
    + fallbackLocale: 'en',
    + localeDir: 'locales',
    + enableInSFC: true
    + }
    + }
    +}