Optionaly load message from an endpoint.

3 files changed, 42 insertions, 7 deletions

diff --git a/README.md b/README.md
index 62bbd77..f149549 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@ logo: "assets/homer.png"
 
 # Optional message
 message:
+  # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
   style: "is-warning"
   title: "Optional message!"
   content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula."
@@ -85,3 +86,16 @@ services:
         url: "#"
 
 ```
+
+If you choose to fetch message information from an endpoint, the output format should be:
+
+```json
+{
+        "style": null,
+        "title": "Lorem ipsum 42",
+        "content": "LA LA LA Lorem ipsum dolor sit amet, ....."
+}
+```
+
+`null` value or missing keys will be ignored and value from the `config.yml` will be used if available.
+Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar)
diff --git a/app.js b/app.js
index def0be7..93902d8 100644
--- a/app.js
+++ b/app.js
@@ -7,9 +7,9 @@ const app = new Vue({
         vlayout: true,
         isDark: null
     },
-    created: function () {
+    created: async function () {
         let that = this;
-        
+
         this.isDark = 'overrideDark' in localStorage ? 
             JSON.parse(localStorage.overrideDark) : matchMedia("(prefers-color-scheme: dark)").matches;
 
@@ -18,11 +18,23 @@ const app = new Vue({
         }
         
         this.checkOffline();
-        that.getConfig().then(function (config) {
-            that.config = config;
-        }).catch(function () {
-            that.offline = true;
-        });
+        try {
+            this.config =  await this.getConfig();
+        } catch (error) {
+            this.offline = true;
+        }
+
+        // Look for a new message if an endpoint is provided.
+        if (this.config.message.url) {
+            this.getMessage(this.config.message.url).then(function(message){
+                // keep the original config value if no value is provided by the endpoint
+                for (const prop of ['title','style','content']) {
+                    if (prop in message && message[prop] !== null) {
+                        that.config.message[prop] = message[prop];
+                    }    
+                }
+            });
+        }
 
         document.addEventListener('visibilitychange', function () {
             if (document.visibilityState == "visible") {
@@ -52,6 +64,14 @@ const app = new Vue({
                 });
             });
         },
+        getMessage: function (url) {
+            return fetch(url).then(function (response) {
+                if (response.status != 200) {
+                    return;
+                }
+                return response.json();
+            });
+        },
         toggleTheme: function() {
             this.isDark = !this.isDark;
             localStorage.overrideDark = this.isDark; 
diff --git a/config.yml b/config.yml
index 8060119..80833f5 100644
--- a/config.yml
+++ b/config.yml
@@ -10,6 +10,7 @@ icon: "fas fa-skull-crossbones"
 # Optional message
 # See https://bulma.io/documentation/components/message/#colors for styling options.
 message:
+  # url: https://....
   style: "is-warning"
   title: "Optional message!"
   content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula."