Further translations

README.md

@@ -81,8 +81,8 @@ 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.
+The languages given here must have a corresponding JSON file in the `src/locales` folder,
+e.g. provide `en` (English) for the file at `src/locales/en.json`.
 
 In CLI, please provide the languages separated by a space, e.g. `--supportedLocales en de fr it`
 
@@ -246,7 +246,7 @@ There are four options you can set in the `authConfig` object:
 * `type` (string): `null` (disabled), `query` (use token in query parameters), or `header` (use token in HTTP request headers).
 * `key` (string): The query string parameter name or the HTTP header name respecively.
 * `formatter` (function|null): You can optionally specify a formatter for the query string value or HTTP header value respectively. If not given, the token is provided as provided by the user.
-* `description` (string|null): Optionally a description that is shown to the user. This should explain how the token can be obtained for example. CommonMark is allowed.
+* `description` (string|null): Optionally a description that is shown to the user. This should explain how the token can be obtained for example. CommonMark is allowed. **Note:** You can leave the description empty in the config file and instead provide a localized string with the key `authConfig` -> `description` in the file for custom phrases (`src/locales/custom.json`).
 
 Please note that this option can only be provided through a config file and is not available via CLI.
 

src/StacBrowser.vue

@@ -1,7 +1,7 @@
 <template>
   <b-container id="stac-browser">
     <Authentication v-if="doAuth.length > 0" />
-    <b-sidebar id="sidebar" title="Browse" shadow lazy>
+    <b-sidebar id="sidebar" :title="$t('browse')" shadow lazy>
       <Sidebar />
     </b-sidebar>
     <!-- Header -->

src/components/AnonymizedNotice.vue

@@ -1,6 +1,6 @@
 <template>
   <b-alert variant="warning" show>
-    <strong>Anonymized</strong>&nbsp;
+    <strong>{{ $t('anonymized.title') }}</strong>&nbsp;
     <small>{{ warning }}</small>
   </b-alert>
 </template>

src/components/Asset.vue

@@ -10,10 +10,10 @@
           {{ asset.title || id }}
         </span>
         <div class="badges ml-1" v-if="Array.isArray(asset.roles)">
-          <b-badge v-if="shown" variant="success" class="shown ml-1 mb-1" title="This is the asset currently shown">
-            <b-icon-check /> shown
+          <b-badge v-if="shown" variant="success" class="shown ml-1 mb-1" :title="$t('assets.currentlyShown')">
+            <b-icon-check /> {{ $t('assets.shown') }}
           </b-badge>
-          <b-badge v-if="asset.deprecated" variant="warning" class="deprecated ml-1 mb-1">Deprecated</b-badge>
+          <b-badge v-if="asset.deprecated" variant="warning" class="deprecated ml-1 mb-1">{{ $t('deprecated') }}</b-badge>
           <b-badge v-for="role in asset.roles" :key="role" :variant="role === 'data' ? 'primary' : 'secondary'" class="role ml-1 mb-1">{{ role }}</b-badge>
           <b-badge v-if="shortFileFormat" variant="dark" class="format ml-1 mb-1" :title="fileFormat"><span v-html="shortFileFormat" /></b-badge>
         </div>
@@ -32,9 +32,9 @@
             {{ buttonText }}
           </b-button>
           <b-button v-if="canShow && !shown" @click="show" variant="primary">
-            <b-icon-eye />
-            <template v-if="isThumbnail">&nbsp;Show thumbnail</template>
-            <template v-else>&nbsp;Show on map</template>
+            <b-icon-eye />&nbsp;
+            <template v-if="isThumbnail">{{ $t('assets.showThumbnail') }}</template>
+            <template v-else>{{ $t('assets.showOnMap') }}</template>
           </b-button>
         </b-button-group>
         <b-card-text class="mt-4" v-if="asset.description">
@@ -222,25 +222,17 @@ export default {
     },
     buttonText() {
       if (this.browserCanOpenFile && this.isBrowserProtocol) {
-        return 'Open';
+        return this.$t('open');
       }
-      let text = [];
-      let preposition = 'for';
+      let what = 'download';
       if (this.isGdalVfs) {
-        text.push('Copy GDAL VFS URL');
+        what = 'copyGdalVfsUrl';
       }
       else if (this.shouldCopy) {
-        text.push('Copy URL');
+        what = 'copyUrl';
       }
-      else {
-        text.push('Download');
-        preposition = 'from';
-      }
-      if (!this.isBrowserProtocol && this.from) {
-        text.push(preposition);
-        text.push(this.from);
-      }
-      return text.join(' ');
+      let where = (!this.isBrowserProtocol && this.from) ? 'withSource' : 'generic';
+      return this.$t(`assets.${what}.${where}`, {source: this.from});
     }
   },
   created() {
@@ -271,18 +263,18 @@ export default {
       }
       switch(protocol.toLowerCase()) {
         case 's3':
-          return 'Amazon S3';
+          return this.$t('protocol.s3');
         case 'abfs':
         case 'abfss':
-          return 'Microsoft Azure';
+          return this.$t('protocol.azure');
         case 'gcs':
-          return 'Google Cloud';
+          return this.$t('protocol.gcs');
         case 'ftp':
-          return 'FTP';
+          return this.$t('protocol.ftp');
         case 'oss':
-          return 'Alibaba Cloud';
+          return this.$t('protocol.oss');
         case 'file':
-          return 'local file system';
+          return this.$t('protocol.file');
       }
       return '';
     },

src/components/Assets.vue

@@ -43,9 +43,13 @@ export default {
     }
   },
   computed: {
+    count() {
+      return Utils.size(this.assets);
+    },
     displayTitle() {
       if (this.title === null) {
-        return this.definition ? 'Assets in Items' : 'Assets';
+        let langKey = this.definition ? 'assets.inItems' : 'stacAssets';
+        return this.$tc(langKey, this.count);
       }
       else {
         return this.title;
@@ -55,7 +59,7 @@ export default {
       if (this.definition) {
         return false; // Don't expand assets for Item Asset Definitions
       }
-      else if (Utils.size(this.assets) === 1 && this.stac && this.stac.isItem()) {
+      else if (this.count === 1 && this.stac && this.stac.isItem()) {
         return true; // Expand asset if it's the only asset available and it is in an Item
       }
       return null; // Let asset decide (e.g. depending on roles)

src/components/Authentication.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="auth">
     <b-form @submit.stop.prevent="submit" @reset="reset">
-      <b-card no-body header="Authentication">
+      <b-card no-body :header="$t('authentication.title')">
         <b-card-body>
-          <p>
-            The requested page requires authentication.
-            Please provide your authentication details in the text field below.
-          </p>
-          <Description v-if="authConfig.description" :description="authConfig.description" />
+          <p>{{ $t('authentication.description') }}</p>
+          <Description v-if="description" :description="description" />
           <b-form-input class="mb-2 mt-2" type="password" v-model.trim="token" autofocus :required="required" />
         </b-card-body>
         <b-card-footer>
-          <b-button type="submit" variant="primary">Submit</b-button>
-          <b-button type="reset" variant="danger" class="ml-3">Cancel</b-button>
+          <b-button type="submit" variant="primary">{{ $t('submit') }}</b-button>
+          <b-button type="reset" variant="danger" class="ml-3">{{ $t('cancel') }}</b-button>
         </b-card-footer>
       </b-card>
     </b-form>
@@ -38,7 +35,13 @@ export default {
     };
   },
   computed: {
-    ...mapState(['authConfig', 'authData'])
+    ...mapState(['authConfig', 'authData']),
+    description() {
+      if (this.authConfig.description) {
+        return this.authConfig.description;
+      }
+      return this.$t('custom.authConfig.description');
+    }
   },
   created() {
     if (this.authData) {

src/components/Catalog.vue

@@ -10,7 +10,7 @@
         <StacLink :data="[data, catalog]" class="stretched-link" />
       </b-card-title>
       <b-card-text v-if="data && (data.description || data.deprecated)" class="intro">
-        <b-badge v-if="data.deprecated" variant="warning" class="deprecated">Deprecated</b-badge>
+        <b-badge v-if="data.deprecated" variant="warning" class="deprecated">{{ $t('deprecated') }}</b-badge>
         {{ data.description | stripCommonmark }}
       </b-card-text>
       <b-card-text v-if="temporalExtent" class="datetime"><span v-html="temporalExtent" /></b-card-text>

src/components/Catalogs.vue

@@ -1,17 +1,17 @@
 <template>
   <section class="catalogs mb-4">
     <h2>
-      <span class="title">Catalogs</span>
-      <b-badge v-if="!hasMore" pill variant="secondary ml-2">{{ catalogs.length }}</b-badge>
+      <span class="title">{{ $tc('stacCatalog', catalogs.length ) }}</span>
+      <b-badge v-if="hasMultiple" pill variant="secondary ml-2">{{ catalogs.length }}</b-badge>
       <ViewButtons class="ml-4" v-model="view" />
-      <SortButtons v-if="!hasMore" class="ml-2" v-model="sort" />
+      <SortButtons v-if="hasMultiple" class="ml-2" v-model="sort" />
     </h2>
-    <SearchBox v-if="!hasMore" class="mt-3 mb-2" v-model="searchTerm" placeholder="Filter catalogs by title" />
-    <b-alert v-if="searchTerm && catalogView.length === 0" variant="warning" show>No catalogs found for the given search term.</b-alert>
+    <SearchBox v-if="hasMultiple" class="mt-3 mb-2" v-model="searchTerm" :placeholder="$t('catalogs.filterByTitle')" />
+    <b-alert v-if="searchTerm && catalogView.length === 0" variant="warning" show>{{ $t('catalogs.noMatches') }}</b-alert>
     <component :is="cardsComponent" v-bind="cardsComponentProps">
       <Catalog v-for="catalog in catalogView" :catalog="catalog" :key="catalog.href" />
     </component>
-    <b-button v-if="hasMore" @click="loadMore" variant="primary" v-b-visible.200="loadMore">Load more...</b-button>
+    <b-button v-if="hasMore" @click="loadMore" variant="primary" v-b-visible.200="loadMore">{{ $t('catalogs.loadMore') }}</b-button>
   </section>
 </template>
 
@@ -50,6 +50,9 @@ export default {
   },
   computed: {
     ...mapGetters(['getStac']),
+    hasMultiple() {
+      return !this.hasMore && this.catalogs.length > 1;
+    },
     catalogView() {
       if (this.hasMore) {
         return this.catalogs;

src/components/CopyButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-button @click="copy" :variant="copyColor" v-bind="buttonProps" title="Copy">
+  <b-button @click="copy" :variant="copyColor" v-bind="buttonProps" :title="$t('copy')">
     <component :is="copyIcon" />
     <slot />    
   </b-button>

src/components/DeprecationNotice.vue

@@ -15,6 +15,7 @@
 </template>
 
 <script>
+// TODO: I18N
 export default {
   name: 'DeprecationNotice',
   components: {

src/components/ErrorAlert.vue

@@ -21,6 +21,7 @@
 </template>
 
 <script>
+// TODO: I18N
 export default {
   name: 'ErrorAlert',
   props: {

src/components/FullscreenButton.vue

@@ -36,7 +36,7 @@ export default {
   },
   computed: {
     title() {
-      return this.isFullscreen ? 'Close Fullscreen' : 'View Fullscreen';
+      return this.isFullscreen ? this.$t('fullscreen.exit') : this.$t('fullscreen.show');
     }
   },
   mounted() {

src/components/Item.vue

@@ -25,6 +25,7 @@
 </template>
 
 <script>
+// TODO: I18N
 import { mapGetters, mapState } from 'vuex';
 import StacLink from './StacLink.vue';
 import STAC from '../models/stac';

src/components/ItemFilter.vue

@@ -79,6 +79,7 @@
 </template>
 
 <script>
+// TODO: I18N
 import { BDropdown, BDropdownItem, BForm, BFormGroup, BFormInput, BFormCheckbox, BFormSelect, BFormTags } from 'bootstrap-vue';
 
 import { mapGetters, mapState } from "vuex";

src/components/Items.vue

@@ -1,8 +1,8 @@
 <template>
   <section class="items mb-4">
     <h2>
-      <span class="title">Items</span>
-      <b-badge v-if="!api" pill variant="secondary ml-2">{{ items.length }}</b-badge>
+      <span class="title">{{ $tc('stacItem', items.length ) }}</span>
+      <b-badge v-if="!api && items.length > 1" pill variant="secondary ml-2">{{ items.length }}</b-badge>
       <SortButtons v-if="!api" class="ml-4" v-model="sort" />
     </h2>
 
@@ -36,6 +36,7 @@
 </template>
 
 <script>
+// TODO: I18N
 import Item from './Item.vue';
 import Loading from './Loading.vue';
 import Pagination from './Pagination.vue';

src/components/Loading.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="classes">
-    <b-spinner label="Loading..." :small="small" />
+    <b-spinner :label="$t('loading')" :small="small" />
   </div>
 </template>
 

src/components/Map.vue

@@ -28,6 +28,7 @@
 </template>
 
 <script>
+// TODO: I18N
 import stacLayer from 'stac-layer';
 import { CRS } from "leaflet";
 import { LMap, LControlZoom, LTileLayer, LWMSTileLayer, LGeoJson } from 'vue2-leaflet';
@@ -134,10 +135,10 @@ export default {
     },
     zoomControlTexts() {
       return {
-        zoomInText: this.$t('map.zoom.in.label'),
-        zoomInTitle: this.$t('map.zoom.in.description'),
-        zoomOutText: this.$t('map.zoom.out.label'),
-        zoomOutTitle: this.$t('map.zoom.out.description')
+        zoomInText: this.$t('leaflet.zoom.in.label'),
+        zoomInTitle: this.$t('leaflet.zoom.in.description'),
+        zoomOutText: this.$t('leaflet.zoom.out.label'),
+        zoomOutTitle: this.$t('leaflet.zoom.out.description')
       };
     },
     baseMaps() {

src/components/Metadata.vue

@@ -1,6 +1,6 @@
 <template>
   <section v-if="formattedData.length > 0" class="metadata">
-    <h2 v-if="title">{{ title }}</h2>
+    <h2 v-if="title">{{ displayTitle }}</h2>
     <b-card-group columns :class="`count-${formattedData.length}`">
       <MetadataGroup v-for="group in formattedData" v-bind="group" :key="group.extension" />
     </b-card-group>
@@ -35,10 +35,13 @@ export default {
         },
         title: {
             type: String,
-            default: 'Metadata'
+            default: null
         }
     },
     computed: {
+        displayTitle() {
+            return this.title ? this.title : this.$t('metadata');
+        },
         formattedData() {
             // Filter all fields as given in ignoreFields and also 
             // ignore fields starting with an underscore which is likely originating from the STAC class

src/components/Pagination.vue

@@ -8,6 +8,7 @@
 </template>
 
 <script>
+// TODO: I18N
 export default {
   name: "Pagination",
   props: {

src/components/Provider.vue

@@ -34,6 +34,7 @@
 </template>
 
 <script>
+// TODO: I18N
 import { BCollapse, BIconChevronRight, BIconChevronDown } from 'bootstrap-vue';
 import Description from './Description.vue';
 import Metadata from './Metadata.vue';

src/components/Providers.vue

@@ -20,6 +20,7 @@
 </template>
 
 <script>
+// TODO: I18N
 import { BListGroup, BListGroupItem } from 'bootstrap-vue';
 
 export default {

src/components/QueryableInput.vue

@@ -58,6 +58,7 @@
 </template>
 
 <script>
+// TODO: I18N
 import Utils from '../utils';
 import { BFormInput, BFormSelect, BIconXCircleFill } from 'bootstrap-vue';
     

src/components/SearchBox.vue

@@ -6,6 +6,7 @@
 </template>
 
 <script>
+// TODO: I18N
 import { BFormInput } from 'bootstrap-vue';
 
 export default {

src/components/SortButtons.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script>
+// TODO: I18N
 import { BIconSortAlphaDown, BIconSortAlphaUp } from 'bootstrap-vue';
 
 export default {