Merge pull request #48 from issmirnov/patch-1

[github/bastienwirtz/homer.git] / README.md

diff --git a/README.md b/README.md
index f052fc9074939580702289034951413228ee13f8..f03152b0cef3d46c4344f27a746f641c9e15ae55 100644 (file)
--- a/README.md
+++ b/README.md
@@ -1,7 +1,8 @@
 # Homer
+
 A dead simple static **HOM**epage for your serv**ER** to keep your services on hand, from a simple `yaml` configuration file.
 
-**Check out the live demo [here](https://homer-demo.netlify.com/).**
+**Check out the live demo [here](https://homer-demo.netlify.app).**
 
 It supports keyboard shortcuts:
 
@@ -16,9 +17,9 @@ If you need authentication support, you're on your own (it can be secured using
 
 ## Roadmap
 
-- [ ] Colors / theme customization
-- [ ] Enable PWA support (making possible to "install" - add to homescreen - it)
-- [ ] Improve maintenability (external library import & service workers cached file list.)
+* [ ] Colors / theme customization
+* [ ] Enable PWA support (making possible to "install" - add to homescreen - it)
+* [ ] Improve maintainability (external library import & service workers cached file list.)
 
 ## Installation
 
@@ -32,12 +33,10 @@ sudo docker run -p 8080:8080 -v /your/local/config.yml:/www/config.yml -v /your/
 
 **How to build / install it?** There is no build system (😱), use it like that! It's meant to be stupid simple & zero maintenance required. Just copy the static files somewhere, and visit the `index.html`.
 
-
 ## Configuration
 
 Title, icons, links, colors, and services can be configured in the `config.yml` file, using [yaml](http://yaml.org/) format.
 
-
 ```yaml
 ---
 # Homepage configuration
@@ -61,11 +60,11 @@ message:
 # links: [] # Allows for navbar (dark mode, layout, and search) without any links
 links:
   - name: "ansible"
-    icon: "fa-github"
+    icon: "fab fa-github"
     url: "https://github.com/xxxxx/ansible/"
-    target: '_blank' # optionnal html a tag target attribute
+    target: '_blank' # optional html a tag target attribute
   - name: "Wiki"
-    icon: "fa-book"
+    icon: "fas fa-book"
     url: "https://wiki.xxxxxx.com/"
 
 # Services
@@ -73,7 +72,7 @@ links:
 # Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
 services:
   - name: "DevOps"
-    icon: "fa-code-fork"
+    icon: "fa fa-code-fork"
     items:
       - name: "Jenkins"
         logo: "/assets/tools/jenkins.png"
@@ -82,7 +81,7 @@ services:
         subtitle: "Continuous integration server"
         tag: "CI"
         url: "#"
-        target: '_blank' # optionnal html a tag target attribute
+        target: '_blank' # optional html a tag target attribute
       - name: "RabbitMQ Management"
         logo: "/assets/tools/rabbitmq.png"
         subtitle: "Manage & monitor RabbitMQ server"
@@ -91,7 +90,7 @@ services:
         tagstyle: "is-success"
         url: "#"
   - name: "Monitoring"
-    icon: "fa-heartbeat"
+    icon: "fas fa-heartbeat"
     items:
       - name: "M/Monit"
         logo: "/assets/tools/monit.png"
@@ -119,11 +118,22 @@ If you choose to fetch message information from an endpoint, the output format s
 
 ```json
 {
-       "style": null,
-       "title": "Lorem ipsum 42",
-       "content": "LA LA LA Lorem ipsum dolor sit amet, ....."
+  "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).
+
+### Style Options
+
+Homer uses [bulma CSS](https://bulma.io/), which provides a [modifiers syntax](https://bulma.io/documentation/modifiers/syntax/). You'll notice in the config there is a `tagstyle` option. It can be set to any of the bulma modifiers. You'll probably want to use one of these 4 main colors:
+
+- `is-info` (blue)
+- `is-success` (green)
+- `is-warning` (yellow)
+- `is-danger` (red)
+
+You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/) for other options regarding size, style, or state.