Add support for a message icon

diff --git a/docs/configuration.md b/docs/configuration.md
index 0e5d00257fc9efe16fd91edc68e47521b9d91e48..2cdc10e0ed5af4bfbdfa7955f30999122349bcad 100644 (file)
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -68,6 +68,7 @@ message:
   # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
   style: "is-warning"
   title: "Optional message!"
+  icon: "fa fa-exclamation-triangle"
   content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
 
 # Optional navbar

diff --git a/public/assets/config.yml.dist b/public/assets/config.yml.dist
index 92133d9824a9b466a6977d61979bf4ffdc19cf85..85478ec718ad1a2bc2c1143e4672b22795961e9d 100644 (file)
--- a/public/assets/config.yml.dist
+++ b/public/assets/config.yml.dist
@@ -42,7 +42,8 @@ colors:
 message:
   #url: https://b4bz.io
   style: "is-dark" # See https://bulma.io/documentation/components/message/#colors for styling options.
-  title: "👋 Demo !"
+  title: "Demo !"
+  icon: "fa fa-grin"
   content: "This is a dummy homepage demo. <br /> Find more information on <a href='https://github.com/bastienwirtz/homer'>github.com/bastienwirtz/homer</a>"
 
 # Optional navbar

diff --git a/src/components/Message.vue b/src/components/Message.vue
index d007d3ec222e005c29f8c5c81fcefa10f40ab9c2..5a1e0eaadc2beb72948133eca646d4adf49fe4da 100644 (file)
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -1,7 +1,10 @@
 <template>
   <article v-if="show" class="message" :class="message.style">
-    <div v-if="message.title" class="message-header">
-      <p>{{ message.title }}</p>
+    <div v-if="message.title || message.icon" class="message-header">
+      <p>
+        <i v-if="message.icon" :class="`fa-fw ${message.icon}`"></i>
+        {{ message.title }}
+      </p>
     </div>
     <div
       v-if="message.content"