From 861139ecdd512c991df4d44ca23a68e60cd35674 Mon Sep 17 00:00:00 2001 From: Matthias Mohr Date: Wed, 21 Dec 2022 20:15:29 +0100 Subject: [PATCH 01/30] First draft for i18n support #123 --- README.md | 18 +++++++++++ config.js | 6 ++++ package.json | 5 ++- src/StacBrowser.vue | 18 +++++------ src/components/Map.vue | 19 +++++++++-- src/components/{Share.vue => Source.vue} | 40 +++++++++++++++++++++--- src/components/StacHeader.vue | 2 +- src/config.js | 9 ++++++ src/i18n.js | 28 +++++++++++++++++ src/locales/de/config.json | 4 +++ src/locales/de/texts.json | 12 +++++++ src/locales/en/config.json | 4 +++ src/locales/en/texts.json | 12 +++++++ src/main.js | 4 ++- src/views/Catalog.vue | 2 +- src/views/SelectDataSource.vue | 6 ++-- vue.config.js | 10 ++++++ 17 files changed, 173 insertions(+), 26 deletions(-) rename src/components/{Share.vue => Source.vue} (70%) create mode 100644 src/config.js create mode 100644 src/i18n.js create mode 100644 src/locales/de/config.json create mode 100644 src/locales/de/texts.json create mode 100644 src/locales/en/config.json create mode 100644 src/locales/en/texts.json diff --git a/README.md b/README.md index 053efe3fe..e31eb8d35 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,24 @@ This allows or disallows loading and browsing external STAC data. External STAC data is any data that is not a children of the given `catalogUrl`. Must be set to `true` if a `catalogUrl` is not given as otherwise you won't be able to browse anything. +### locale + +The default language to use for STAC Browser, defaults to `en` (English). +The language given here must be present in `supportedLocales`. + +### fallbackLocale + +The language to use if individual phrases are not available in the default language, defaults to `en` (English). +The language given here must be present in `supportedLocales`. + +### supportedLocales + +A list of languages to show in the STAC Browser UI. +The languages given here must have a corresponding JSON file in the `src/locales` folder, e.g. +`src/locales/en.json` for English. + +In CLI, please provide the languages separated by a space, e.g. `--supportedLocales en de fr it` + ### stacLint ***experimental*** diff --git a/config.js b/config.js index 0ea49e6b5..a0ad0b245 100644 --- a/config.js +++ b/config.js @@ -2,6 +2,12 @@ module.exports = { catalogUrl: null, // Must have a slash at the end for folders/APIs catalogTitle: "STAC Browser", allowExternalAccess: true, // Must be true if catalogUrl is not given + locale: "en", + fallbackLocale: "en", + supportedLocales: [ + "en", + "de" + ], useTileLayerAsFallback: true, tileSourceTemplate: null, displayGeoTiffByDefault: false, diff --git a/package.json b/package.json index 011feebfc..b541edb46 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "scripts": { "start": "vue-cli-service serve", "build": "vue-cli-service build --report", - "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\"" }, "bugs": { "url": "https://github.com/radiantearth/stac-browser/issues" @@ -44,6 +45,7 @@ "urijs": "^1.19.11", "v-clipboard": "^2.2.3", "vue": "^2.6.12", + "vue-i18n": "^8.28.2", "vue-read-more-smooth": "^0.1.8", "vue-router": "^3.2.0", "vue2-datepicker": "^3.9.2", @@ -63,6 +65,7 @@ "eslint-plugin-vue": "^8.7.1", "sass": "^1.26.5", "sass-loader": "^8.0.2", + "vue-cli-plugin-i18n": "~2.3.1", "vue-template-compiler": "^2.6.12" }, "browserslist": [ diff --git a/src/StacBrowser.vue b/src/StacBrowser.vue index 09b54991f..fa978ab56 100644 --- a/src/StacBrowser.vue +++ b/src/StacBrowser.vue @@ -16,7 +16,7 @@ @@ -26,6 +26,7 @@ import Vue from "vue"; import VueRouter from "vue-router"; import Vuex, { mapGetters, mapState } from 'vuex'; +import CONFIG from './config'; import getRoutes from "./router"; import getStore from "./store"; @@ -61,14 +62,6 @@ Vue.directive('b-toggle', VBToggle); // Used to detect when a catalog/item becomes visible so that further data can be loaded Vue.directive('b-visible', VBVisible); -let CONFIG; -if (typeof CONFIG_PATH === 'undefined' && typeof CONFIG_CLI === 'undefined') { - CONFIG = require('../config'); -} -else { - CONFIG = Object.assign(require(CONFIG_PATH), CONFIG_CLI); -} - // Setup store Vue.use(Vuex); const store = getStore(CONFIG); @@ -117,8 +110,8 @@ export default { }; }, computed: { - ...mapState(['title', 'doAuth', 'globalError', 'stateQueryParameters']), - ...mapState({catalogUrlFromVueX: 'catalogUrl'}), + ...mapState(['doAuth', 'globalError', 'stateQueryParameters', 'title']), + ...mapState({catalogUrlFromVueX: 'catalogUrl', localeFromVueX: 'locale'}), ...mapGetters(['displayCatalogTitle']), browserVersion() { if (typeof STAC_BROWSER_VERSION !== 'undefined') { @@ -134,6 +127,9 @@ export default { title(title) { document.title = title; }, + localeFromVueX(locale) { + this.$root.$i18n.locale = locale; + }, catalogUrlFromVueX(url) { if (url) { // Load the root catalog data if not available (e.g. after page refresh or external access) diff --git a/src/components/Map.vue b/src/components/Map.vue index 5f3763d4b..7ed3d5e4f 100644 --- a/src/components/Map.vue +++ b/src/components/Map.vue @@ -1,7 +1,7 @@