Optionaly load message from an endpoint.

diff --git a/README.md b/README.md
index 62bbd779a19f85cd217ae3e25c645eebbb2ab7e5..f1495495486ad80f6a44dd85572aa743ea100e26 100644 (file)
--- 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 def0be7957c525689365c9ea17ba203cb5212b39..93902d803cbef8e1c4e72e9f2997b645198fae55 100644 (file)
--- 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 8060119ada58cff2316e08fef80d4b2cb5dfeae2..80833f5c562a1afe8562979c42078f9f0a77c344 100644 (file)
--- 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."