Add simple way to customize stac-fields, update stac-fields

README.md

@@ -25,8 +25,9 @@ certain *OGC API - Records* and *OGC API - Features* compliant servers.
   - [Languages](#languages)
   - [Themes](#themes)
   - [Basemaps](#basemaps)
+  - [Additional metadata fields](#additional-metadata-fields)
   - [Customize through root catalog](#customize-through-root-catalog)
-  - [Custom fields](#custom-fields)
+  - [Custom extensions](#custom-extensions)
 - [Docker](#docker)
 - [Contributing](#contributing)
   - [Adding a new language](#adding-a-new-language)
@@ -438,7 +439,7 @@ To add your own language, please follow the guide below: [Adding a new langauge]
 
 #### Custom phrases
 You can define custom phrases in the `custom.json`.
-This is especially useful for phrases that are coming from non-standadized metadata fields.
+This is especially useful for phrases that are coming from non-standadized metadata fields (see the chapter "[Additional metadata fields](#additional-metadata-fields)").
 If you've found metadata labels (e.g. "Price" and "Generation Time") that are not translated,
 you can add it to the `custom.json`. For metadata fields you need to add it to a the object `fields`
 as it is the group for the metadata-related phrases.
@@ -470,6 +471,59 @@ The file `basemaps.config.js` contains the configuration for the basemaps.
 You can update either just the `BASEMAPS` object or you can write a custom function `configureBasemap` that returns the desired options for [vue2-leaflet](https://vue2-leaflet.netlify.app/).
 [XYZ](https://vue2-leaflet.netlify.app/components/LTileLayer.html#props) and [WMS](https://vue2-leaflet.netlify.app/components/LWMSTileLayer.html#props) basemaps are supported and have different options that you can set.
 
+### Additional metadata fields
+
+The metadata that STAC Browser renders is rendered primarily through the library [`stac-fields`](https://www.npmjs.com/package/@radiantearth/stac-fields).
+It contains a lot of rules for rendering [many existing STAC extensions](https://github.com/stac-utils/stac-fields/blob/main/fields.json) nicely. 
+Nevertheless, if you use custom extensions to the STAC specification you may want to register your own rendering rules for the new fields.
+This can be accomplished by customizing the file [`fields.config.js`](./fields.config.js).
+It uses the [Registry](https://github.com/stac-utils/stac-fields/blob/main/README.md#registry) defined in stac-fields to add more extensions and fields to stac-fields and STAC Browser.
+
+To add your own fields, please consult the documentation for the [Registry](https://github.com/stac-utils/stac-fields/blob/main/README.md#registry).
+
+#### Example
+If you have a custom extension with the title "Radiant Earth" that uses the prefix `radiant:` you can add the extension as such:
+
+```js
+Registry.addExtension('radiant', 'Radiant Earth');
+```
+
+If this extension has a boolean field `radiant:public_access` that describes whether an entity can be accessed publicly or not, this could be described as follows:
+
+```js
+Registry.addMetadataField('radiant:public_access', {
+  label: "Data Access",
+  formatter: value => value ? "Public" : "Private"
+});
+```
+
+This displays the field (with a value of `true`) in STAC Browser as follows: `Data Access: Public`.
+
+The first parameter is the field name, the second parameter describes the field using a ["field specification"](https://github.com/stac-utils/stac-fields/blob/main/README.md#fieldsjson).
+Please check the field specification for available options.
+
+#### Translation
+
+STAC Browser supports [multiple languages](#languages).
+If you use more than one language, you likely want to also translate the phrases that you've added above (in the example `Data Access`, `Public` and `Private`, assuming that `Radiant Earth` is a name and doesn't need to be translated).
+All new phrases should be added to the [active languages](#supportedlocales).
+To add the phrases mentioned above you need to go through the folders in `src/locales` and in the folders of the active languages update the file `custom.json` as described in the section that describes [adding custom phrases](#custom-phrases).
+All new phrases must be added to the property `fields`.
+
+Below you can find an example of an updated `custom.json` for the German language (folder `de`). It also includes the `authConfig`, which is contained in the file by default for [other purposes](#authconfig).
+```
+{
+  "authConfig": {
+    "description": ""
+  },
+  "fields": {
+    "Data Access": "Zugriff auf die Daten",
+    "Public": "Öffentlich",
+    "Private": "Privat"
+  }
+}
+```
+
 ### Customize through root catalog
 
 You can also provide a couple of the config options through the root catalog. 
@@ -483,9 +537,9 @@ You need to provide a field `stac_browser` and then you can set any of the follo
 - `showThumbnailsAsAssets`
 - `stacLint` (can only be disabled)
 
-### Custom fields
+### Custom extensions
 
-STAC Browser supports some non-standardized fields that you can use to improve the user-experience.
+STAC Browser supports some non-standardized extensions to the STAC specification that you can use to improve the user-experience.
 
 1. To the [Provider Object](https://github.com/radiantearth/stac-spec/blob/master/collection-spec/collection-spec.md#provider-object) you can add an `email` (or `mail`) field with an e-mail address and the mail will be shown in the Browser, too.
 2. A link with relation type `icon` and a Browser-supported media type in any STAC entity will show an icon in the header and the lists.

fields.config.js

@@ -0,0 +1,9 @@
+import { Registry } from '@radiantearth/stac-fields';
+
+// Please consult https://github.com/radiantearth/stac-browser/blob/main/README.md#additional-metadata-fields for details.
+
+// Registry.addExtension('radiant', 'Radiant Earth');
+// Registry.addMetadataField('radiant:public_access', {
+//     label: "Data Access",
+//     formatter: value => value ? "Public" : "Private"
+// });

package.json

@@ -35,7 +35,7 @@
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^10.1.0",
     "@musement/iso-duration": "^1.0.0",
-    "@radiantearth/stac-fields": "1.0.0",
+    "@radiantearth/stac-fields": "1.1.1",
     "@radiantearth/stac-migrate": "~1.2.0",
     "axios": "^1.2.0",
     "bootstrap-vue": "^2.21.2",

src/components/Metadata.vue

@@ -12,6 +12,9 @@ import { formatAsset, formatCollection, formatGrouped, formatItemProperties, for
 import MetadataGroup from './metadata/MetadataGroup.vue';
 import { isoDuration } from '@musement/iso-duration';
 import { mapState } from 'vuex';
+// Register custom fields for the metadata rendering
+// eslint-disable-next-line
+import __ from '../../fields.config';
 
 export default {
     name: "Metadata",