From b9c5fcf085bed9c6100283133531b36bfbb06cf0 Mon Sep 17 00:00:00 2001 From: Bastien Wirtz Date: Mon, 25 May 2020 15:07:03 -0700 Subject: Build system integration using vue-cli. --- README.md | 109 +++++++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 94 insertions(+), 15 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index f03152b..1abce2f 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,10 @@ A dead simple static **HOM**epage for your serv**ER** to keep your services on h It supports keyboard shortcuts: -* `/` Start searching. -* `Escape` Stop searching. -* `Enter` Open the first matching result (respects the bookmark's `_target` property). -* `Alt`/`Option` + `Enter` Open the first matching result in a new tab. +- `/` Start searching. +- `Escape` Stop searching. +- `Enter` Open the first matching result (respects the bookmark's `_target` property). +- `Alt`/`Option` + `Enter` Open the first matching result in a new tab. If you need authentication support, you're on your own (it can be secured using a web server auth module or exposing it only through a VPN network / SSH tunnel, ...) @@ -17,11 +17,13 @@ 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 maintainability (external library import & service workers cached file list.) +- [ ] Add more themes. +- [ ] Add support for custom service card (add custom feature to some service / app link) +- [x] Colors / theme customization +- [x] Enable PWA support (making possible to "install" - add to homescreen - it) +- [x] Improve maintainability (external library import & service workers cached file list.) -## Installation +## Usage ### Using docker @@ -31,7 +33,51 @@ sudo docker run -p 8080:8080 -v /your/local/config.yml:/www/config.yml -v /your/ ### Manually -**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`. +Homer is a static page that need to be generated from the source in this repository. +Use the folowing command to build the project: + +```sh +# Using yarn (recommended) +yarn install +yarn build + +# **OR** Using npm +npm install +npm run build +``` + +Then your dashboard is ready to use in the `/dist` directory. +Use it like any static HTML content (use a webserver or open the html index directly). + +## Developement + +```sh +# Using yarn (recommended) +yarn install +yarn serve + +# **OR** Using npm +npm install +npm run serve +``` + +### themes + +Theme are meant to be simple customization (written in [scss](https://sass-lang.com/documentation/syntax)). +To addd a new theme, just add a file in the theme directory, and put all style in the `body #app.theme-` scope. Then import it in the main style file. + +```scss +// `src/assets/themes/my-awesome-theme.scss` +body #app.theme-my-awesome-theme. { ... } +``` + +```scss +// `src/assets/app.scss` +// Themes import +@import "./themes/sui.scss"; +... +@import "./themes/my-awesome-theme.scss"; +``` ## Configuration @@ -42,12 +88,46 @@ Title, icons, links, colors, and services can be configured in the `config.yml` # Homepage configuration # See https://fontawesome.com/icons for icons options -title: "Simple homepage" +title: "App dashboard" subtitle: "Homer" logo: "assets/homer.png" # Alternatively a fa icon can be provided: -# icon: "fas fa-skull-crossbones" -footer: '

Created with ❤️ with bulma, vuejs & font awesome // Fork me on

' # set false if you want to hide it.header: +# icon: "fas fa-skull-crossbones" + +header: true # Set to false to hide the header +footer: '

Created with ❤️ with bulma, vuejs & font awesome // Fork me on

' # set false if you want to hide it.header: + +# Optional theming +theme: default # 'default' or one of the theme available in 'src/assets/themes'. + +# Here is the exaustive list of customization parameters +# However all value are optional and will fallback to default if not set. +# if you want to change only some of the colors, feel free to remove all unused key. +colors: + light: + highlight-primary: "#3367d6" + highlight-secondary: "#4285f4" + highlight-hover: "#5a95f5" + background: "#f5f5f5" + card-background: "#ffffff" + text: "#363636" + text-header: "#424242" + text-title: "#303030" + text-subtitle: "#424242" + card-shadow: rgba(0, 0, 0, 0.1) + link-hover: "#363636" + dark: + highlight-primary: "#3367d6" + highlight-secondary: "#4285f4" + highlight-hover: "#5a95f5" + background: "#131313" + card-background: "#2b2b2b" + text: "#eaeaea" + text-header: "#ffffff" + text-title: "#fafafa" + text-subtitle: "#f5f5f5" + card-shadow: rgba(0, 0, 0, 0.4) + link-hover: "#ffdd57" # Optional message message: @@ -62,7 +142,7 @@ links: - name: "ansible" icon: "fab fa-github" url: "https://github.com/xxxxx/ansible/" - target: '_blank' # optional 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 +161,7 @@ services: subtitle: "Continuous integration server" tag: "CI" url: "#" - target: '_blank' # optional 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" @@ -111,7 +191,6 @@ services: subtitle: "Pingdom public reports overview" tag: "CI" url: "#" - ``` If you choose to fetch message information from an endpoint, the output format should be: -- cgit v1.2.3