From 94db9d8f01415197a5e377307cd43945460f284d Mon Sep 17 00:00:00 2001 From: UKDTOM Date: Sat, 16 May 2020 22:52:50 +0200 Subject: [PATCH] First step in localize --- package-lock.json | 269 +++++++++++++++++++++++++++++++ package.json | 5 +- src/components/Home.vue | 20 ++- src/components/layout/Header.vue | 2 +- src/components/layout/Menu.vue | 30 ---- src/i18n.js | 23 +++ src/locales/da.json | 14 ++ src/locales/en.json | 15 ++ src/main.js | 2 + vue.config.js | 10 ++ 10 files changed, 352 insertions(+), 38 deletions(-) create mode 100644 src/i18n.js create mode 100644 src/locales/da.json create mode 100644 src/locales/en.json create mode 100644 vue.config.js diff --git a/package-lock.json b/package-lock.json index 7f5d714..36cad1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3066,6 +3066,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": "2.2.1", "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz", @@ -3167,6 +3211,13 @@ "simple-swizzle": "^0.2.2" } }, + "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", @@ -4200,6 +4251,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", @@ -4582,6 +4643,12 @@ "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==", "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", @@ -5086,6 +5153,23 @@ "locate-path": "^2.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", @@ -6326,6 +6410,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", @@ -10651,6 +10741,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.0.0", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz", @@ -10683,6 +10806,152 @@ "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==", "dev": true }, + "vue-i18n": { + "version": "8.17.6", + "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.17.6.tgz", + "integrity": "sha512-SsKL5D9Ii3zJPsFhUSllY754XuZvP8uCouUm+Mbylu95h3OwenV09uzIIEjkT7EtWyDQuWSMWObrNaD4ukBGZw==" + }, + "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 + }, + "find-up": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", + "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", + "dev": true, + "requires": { + "locate-path": "^3.0.0" + } + }, + "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 + }, + "locate-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", + "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", + "dev": true, + "requires": { + "p-locate": "^3.0.0", + "path-exists": "^3.0.0" + } + }, + "p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", + "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "dev": true, + "requires": { + "p-try": "^2.0.0" + } + }, + "p-locate": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", + "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", + "dev": true, + "requires": { + "p-limit": "^2.0.0" + } + }, + "p-try": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", + "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.2", "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.2.tgz", diff --git a/package.json b/package.json index 4dc8b6c..c46c7a3 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "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": { "@fortawesome/fontawesome-free": "^5.13.0", @@ -15,6 +16,7 @@ "core-js": "^3.6.4", "secure-ls": "^1.2.6", "vue": "^2.6.11", + "vue-i18n": "^8.17.3", "vue-router": "^3.1.6", "vue-sidebar-menu": "^4.5.3", "vuex": "^3.1.3", @@ -29,6 +31,7 @@ "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": { diff --git a/src/components/Home.vue b/src/components/Home.vue index 0a9ea1b..5f02b4e 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -1,17 +1,25 @@ diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index 9890f6c..07ec6eb 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -9,7 +9,7 @@
-

WebTools-NG

+

{{ $t("Common.AppName") }}

diff --git a/src/components/layout/Menu.vue b/src/components/layout/Menu.vue index fb99e9c..e9667eb 100644 --- a/src/components/layout/Menu.vue +++ b/src/components/layout/Menu.vue @@ -30,36 +30,6 @@ import '@fortawesome/fontawesome-free/css/all.css' icon: 'fas fa-file-export' }, - { - href: { path: '/' }, - title: 'Subtitles', - icon: 'fas fa-closed-captioning' - }, - { - href: { path: '/' }, - title: 'Logs', - icon: 'fas fa-clipboard-list' - }, - { - href: { path: '/' }, - title: 'UAS', - icon: 'fas fa-box-open' - }, - { - href: { path: '/' }, - title: 'FindMedia', - icon: 'fas fa-photo-video' - }, - { - href: { path: '/' }, - title: 'Playlists', - icon: 'fas fa-list' - }, - { - href: { path: '/' }, - title: 'Techinfo', - icon: 'fas fa-stethoscope' - }, { header: true, title: 'Options', diff --git a/src/i18n.js b/src/i18n.js new file mode 100644 index 0000000..2b285c5 --- /dev/null +++ b/src/i18n.js @@ -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() +}) diff --git a/src/locales/da.json b/src/locales/da.json new file mode 100644 index 0000000..750b3f5 --- /dev/null +++ b/src/locales/da.json @@ -0,0 +1,14 @@ +{ + "Common": { + "AppName": "WebTools-NG" + }, + "Home": { + "Title": "Velkommen til @:Common.AppName", + "About": "@:Common.AppName er et værktøj, som kan hjælpe med at administrere en Plex Media Server.", + "Modules": "Tool Moduler som er tilgængelige er:" + }, + "ET": { + "Name": "ExportTool", + "Description": "@:ET.Name gør det muligt at eksportere information vedr. de medias du har i dine biblioteker" + } +} \ No newline at end of file diff --git a/src/locales/en.json b/src/locales/en.json new file mode 100644 index 0000000..ba6b956 --- /dev/null +++ b/src/locales/en.json @@ -0,0 +1,15 @@ +{ + "Common": { + "AppName": "WebTools-NG" + }, + "Home": { + "Name": "Home", + "Title": "Welcome to @:Common.AppName", + "About": "@:Common.AppName is a tool that enables the use of tool modules to help with Plex Server management.", + "Modules": "Tool Modules currently available are:" + }, + "ET": { + "Name": "ExportTool", + "Description": "@:ET.Name allows you to export some information about the medias in your libraries" + } +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 46d0f1b..25c12e5 100644 --- a/src/main.js +++ b/src/main.js @@ -11,6 +11,7 @@ import 'buefy/dist/buefy.css' import VueSidebarMenu from 'vue-sidebar-menu' import 'vue-sidebar-menu/dist/vue-sidebar-menu.css' import '@fortawesome/fontawesome-free/css/all.css' +import i18n from './i18n' Vue.use(VueRouter); @@ -28,5 +29,6 @@ Vue.config.productionTip = false new Vue({ render: h => h(App), router: router, + i18n, store: store }).$mount('#app') diff --git a/vue.config.js b/vue.config.js new file mode 100644 index 0000000..6bcaaa6 --- /dev/null +++ b/vue.config.js @@ -0,0 +1,10 @@ +module.exports = { + pluginOptions: { + i18n: { + locale: 'en', + fallbackLocale: 'en', + localeDir: 'locales', + enableInSFC: false + } + } +}