From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Mon, 25 May 2020 18:42:05 +0000 (-0700)
Subject: Merge pull request #48 from issmirnov/patch-1
X-Git-Tag: 120405250~1
X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=ab7ac44c191e3b7dea696e76b74097e23f73b18c;hp=-c;p=github%2Fbastienwirtz%2Fhomer.git

Merge pull request #48 from issmirnov/patch-1

Add "Style Options" section for bulma CSS
---

ab7ac44c191e3b7dea696e76b74097e23f73b18c
diff --combined README.md
index faa7660,827226b..f03152b
--- a/README.md
+++ b/README.md
@@@ -1,5 -1,4 +1,5 @@@
  # 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.app).**
@@@ -17,9 -16,9 +17,9 @@@ If you need authentication support, you
  
  ## 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
  
@@@ -33,10 -32,12 +33,10 @@@ sudo docker run -p 8080:8080 -v /your/l
  
  **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
@@@ -62,7 -63,7 +62,7 @@@ links
    - name: "ansible"
      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: "fas fa-book"
      url: "https://wiki.xxxxxx.com/"
@@@ -81,7 -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"
@@@ -118,11 -119,22 +118,22 @@@ If you choose to fetch message informat
  
  ```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.