From 86ffb128d81c95b03f2cf1f5442878ab0697ed9a Mon Sep 17 00:00:00 2001 From: Matthias Mohr Date: Wed, 17 May 2023 19:09:49 +0200 Subject: [PATCH] Add simple way to customize stac-fields, update stac-fields --- README.md | 62 ++++++++++++++++++++++++++++++++++--- fields.config.js | 9 ++++++ package.json | 2 +- src/components/Metadata.vue | 3 ++ 4 files changed, 71 insertions(+), 5 deletions(-) create mode 100644 fields.config.js diff --git a/README.md b/README.md index 628152dab..e2f0de3c1 100644 --- a/README.md +++ b/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. diff --git a/fields.config.js b/fields.config.js new file mode 100644 index 000000000..e03558305 --- /dev/null +++ b/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" +// }); \ No newline at end of file diff --git a/package.json b/package.json index 6d3ef03c7..ef714f47e 100644 --- a/package.json +++ b/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", diff --git a/src/components/Metadata.vue b/src/components/Metadata.vue index 788b0f590..9c7e7ffac 100644 --- a/src/components/Metadata.vue +++ b/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",