forked from extern/homer
Adds mapping remote field to Homer expected ones when loading message from url
This commit is contained in:
parent
3786f80dae
commit
6d29bc27e7
@ -66,6 +66,15 @@ colors:
|
||||
# Optional message
|
||||
message:
|
||||
# url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
|
||||
# mapping: # allows to map fields from the remote format to the one expected by Homer
|
||||
# title: 'id' # use value from field 'id' as title
|
||||
# content: 'value' # value from field 'value' as content
|
||||
#
|
||||
# Real example using chucknorris.io for showing Chuck Norris facts as messages:
|
||||
# url: https://api.chucknorris.io/jokes/random
|
||||
# mapping:
|
||||
# title: 'id'
|
||||
# content: 'value'
|
||||
style: "is-warning"
|
||||
title: "Optional message!"
|
||||
icon: "fa fa-exclamation-triangle"
|
||||
|
@ -113,6 +113,64 @@ docker create \
|
||||
|
||||
|
||||
## Get the news headlines in Homer
|
||||
|
||||
### Mapping Fields
|
||||
Most times, the url you're getting headlines from follows a different schema than the one expected by Homer.
|
||||
|
||||
For example, if you would like to show jokes from ChuckNorris.io, you'll find that the url https://api.chucknorris.io/jokes/random is giving you info like this:
|
||||
|
||||
```json
|
||||
{
|
||||
"categories": [],
|
||||
"created_at": "2020-01-05 13:42:22.089095",
|
||||
"icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
|
||||
"id": "MR2-BnMBR667xSpQBIleUg",
|
||||
"updated_at": "2020-01-05 13:42:22.089095",
|
||||
"url": "https://api.chucknorris.io/jokes/MR2-BnMBR667xSpQBIleUg",
|
||||
"value": "Chuck Norris can quitely sneak up on himself"
|
||||
}
|
||||
```
|
||||
|
||||
but... you need that info to be transformed to something like this:
|
||||
|
||||
```json
|
||||
{
|
||||
"title": "MR2-BnMBR667xSpQBIleUg",
|
||||
"content": "Chuck Norris can quitely sneak up on himself"
|
||||
}
|
||||
```
|
||||
|
||||
Now, you can do that using the `mapping` field in your `message` configuration. This example would be something like this:
|
||||
|
||||
```yml
|
||||
message:
|
||||
url: https://api.chucknorris.io/jokes/random
|
||||
mapping:
|
||||
title: 'id'
|
||||
content: 'value'
|
||||
```
|
||||
|
||||
As you would see, using the ID as a title doesn't seem nice, that's why when a field is empty it would keep the default values, like this:
|
||||
|
||||
```yml
|
||||
message:
|
||||
url: https://api.chucknorris.io/jokes/random
|
||||
mapping:
|
||||
content: 'value'
|
||||
title: "Chuck Norris Facts!"
|
||||
```
|
||||
|
||||
and even an error message in case the `url` didn't respond or threw an error:
|
||||
|
||||
```yml
|
||||
message:
|
||||
url: https://api.chucknorris.io/jokes/random
|
||||
mapping:
|
||||
content: 'value'
|
||||
title: "Chuck Norris Facts!"
|
||||
content: "Message could not be loaded"
|
||||
```
|
||||
|
||||
#### `by @JamiePhonic`
|
||||
|
||||
Homer allows you to set a "message" that will appear at the top of the page, however, you can also supply a `url:`.
|
||||
|
@ -30,7 +30,8 @@ export default {
|
||||
// Look for a new message if an endpoint is provided.
|
||||
this.message = Object.assign({}, this.item);
|
||||
if (this.item && this.item.url) {
|
||||
const fetchedMessage = await this.getMessage(this.item.url);
|
||||
let fetchedMessage = await this.getMessage(this.item.url);
|
||||
if (this.item.mapping) fetchedMessage = this.mapRemoteMessage(fetchedMessage);
|
||||
// keep the original config value if no value is provided by the endpoint
|
||||
for (const prop of ["title", "style", "content"]) {
|
||||
if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
|
||||
@ -49,6 +50,13 @@ export default {
|
||||
return response.json();
|
||||
});
|
||||
},
|
||||
|
||||
mapRemoteMessage: function (message) {
|
||||
let mapped = {};
|
||||
// map property from message into mapped according to mapping config (only if field has a value):
|
||||
for (const prop in this.item.mapping) if (message[this.item.mapping[prop]]) mapped[prop] = message[this.item.mapping[prop]];
|
||||
return mapped;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user