aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--docs/configuration.md9
-rw-r--r--docs/tips-and-tricks.md58
-rw-r--r--src/components/Message.vue10
3 files changed, 76 insertions, 1 deletions
diff --git a/docs/configuration.md b/docs/configuration.md
index a43d7f1..93fa898 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -66,6 +66,15 @@ colors:
66# Optional message 66# Optional message
67message: 67message:
68 # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below. 68 # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
69 # mapping: # allows to map fields from the remote format to the one expected by Homer
70 # title: 'id' # use value from field 'id' as title
71 # content: 'value' # value from field 'value' as content
72 #
73 # Real example using chucknorris.io for showing Chuck Norris facts as messages:
74 # url: https://api.chucknorris.io/jokes/random
75 # mapping:
76 # title: 'id'
77 # content: 'value'
69 style: "is-warning" 78 style: "is-warning"
70 title: "Optional message!" 79 title: "Optional message!"
71 icon: "fa fa-exclamation-triangle" 80 icon: "fa fa-exclamation-triangle"
diff --git a/docs/tips-and-tricks.md b/docs/tips-and-tricks.md
index 2719fc5..63eeeaf 100644
--- a/docs/tips-and-tricks.md
+++ b/docs/tips-and-tricks.md
@@ -113,6 +113,64 @@ docker create \
113 113
114 114
115## Get the news headlines in Homer 115## Get the news headlines in Homer
116
117### Mapping Fields
118Most times, the url you're getting headlines from follows a different schema than the one expected by Homer.
119
120For 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:
121
122```json
123{
124 "categories": [],
125 "created_at": "2020-01-05 13:42:22.089095",
126 "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
127 "id": "MR2-BnMBR667xSpQBIleUg",
128 "updated_at": "2020-01-05 13:42:22.089095",
129 "url": "https://api.chucknorris.io/jokes/MR2-BnMBR667xSpQBIleUg",
130 "value": "Chuck Norris can quitely sneak up on himself"
131}
132```
133
134but... you need that info to be transformed to something like this:
135
136```json
137{
138 "title": "MR2-BnMBR667xSpQBIleUg",
139 "content": "Chuck Norris can quitely sneak up on himself"
140}
141```
142
143Now, you can do that using the `mapping` field in your `message` configuration. This example would be something like this:
144
145```yml
146message:
147 url: https://api.chucknorris.io/jokes/random
148 mapping:
149 title: 'id'
150 content: 'value'
151```
152
153As 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:
154
155```yml
156message:
157 url: https://api.chucknorris.io/jokes/random
158 mapping:
159 content: 'value'
160 title: "Chuck Norris Facts!"
161```
162
163and even an error message in case the `url` didn't respond or threw an error:
164
165```yml
166message:
167 url: https://api.chucknorris.io/jokes/random
168 mapping:
169 content: 'value'
170 title: "Chuck Norris Facts!"
171 content: "Message could not be loaded"
172```
173
116#### `by @JamiePhonic` 174#### `by @JamiePhonic`
117 175
118Homer allows you to set a "message" that will appear at the top of the page, however, you can also supply a `url:`. 176Homer allows you to set a "message" that will appear at the top of the page, however, you can also supply a `url:`.
diff --git a/src/components/Message.vue b/src/components/Message.vue
index 5a1e0ea..df203ae 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -30,7 +30,8 @@ export default {
30 // Look for a new message if an endpoint is provided. 30 // Look for a new message if an endpoint is provided.
31 this.message = Object.assign({}, this.item); 31 this.message = Object.assign({}, this.item);
32 if (this.item && this.item.url) { 32 if (this.item && this.item.url) {
33 const fetchedMessage = await this.getMessage(this.item.url); 33 let fetchedMessage = await this.getMessage(this.item.url);
34 if (this.item.mapping) fetchedMessage = this.mapRemoteMessage(fetchedMessage);
34 // keep the original config value if no value is provided by the endpoint 35 // keep the original config value if no value is provided by the endpoint
35 for (const prop of ["title", "style", "content"]) { 36 for (const prop of ["title", "style", "content"]) {
36 if (prop in fetchedMessage && fetchedMessage[prop] !== null) { 37 if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
@@ -49,6 +50,13 @@ export default {
49 return response.json(); 50 return response.json();
50 }); 51 });
51 }, 52 },
53
54 mapRemoteMessage: function (message) {
55 let mapped = {};
56 // map property from message into mapped according to mapping config (only if field has a value):
57 for (const prop in this.item.mapping) if (message[this.item.mapping[prop]]) mapped[prop] = message[this.item.mapping[prop]];
58 return mapped;
59 },
52 }, 60 },
53}; 61};
54</script> 62</script>