aboutsummaryrefslogtreecommitdiffhomepage
path: root/README.md
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2020-05-25 15:07:03 -0700
committerBastien Wirtz <bastien.wirtz@gmail.com>2020-05-25 15:07:03 -0700
commitb9c5fcf085bed9c6100283133531b36bfbb06cf0 (patch)
tree7baa4d16c9d6c06745727c7c273065a29b8fc1d7 /README.md
parentab7ac44c191e3b7dea696e76b74097e23f73b18c (diff)
downloadhomer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.tar.gz
homer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.tar.zst
homer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.zip
Build system integration using vue-cli.
Diffstat (limited to 'README.md')
-rw-r--r--README.md109
1 files changed, 94 insertions, 15 deletions
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
6 6
7It supports keyboard shortcuts: 7It supports keyboard shortcuts:
8 8
9* `/` Start searching. 9- `/` Start searching.
10* `Escape` Stop searching. 10- `Escape` Stop searching.
11* `Enter` Open the first matching result (respects the bookmark's `_target` property). 11- `Enter` Open the first matching result (respects the bookmark's `_target` property).
12* `Alt`/`Option` + `Enter` Open the first matching result in a new tab. 12- `Alt`/`Option` + `Enter` Open the first matching result in a new tab.
13 13
14If 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, ...) 14If 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, ...)
15 15
@@ -17,11 +17,13 @@ If you need authentication support, you're on your own (it can be secured using
17 17
18## Roadmap 18## Roadmap
19 19
20* [ ] Colors / theme customization 20- [ ] Add more themes.
21* [ ] Enable PWA support (making possible to "install" - add to homescreen - it) 21- [ ] Add support for custom service card (add custom feature to some service / app link)
22* [ ] Improve maintainability (external library import & service workers cached file list.) 22- [x] Colors / theme customization
23- [x] Enable PWA support (making possible to "install" - add to homescreen - it)
24- [x] Improve maintainability (external library import & service workers cached file list.)
23 25
24## Installation 26## Usage
25 27
26### Using docker 28### Using docker
27 29
@@ -31,7 +33,51 @@ sudo docker run -p 8080:8080 -v /your/local/config.yml:/www/config.yml -v /your/
31 33
32### Manually 34### Manually
33 35
34**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`. 36Homer is a static page that need to be generated from the source in this repository.
37Use the folowing command to build the project:
38
39```sh
40# Using yarn (recommended)
41yarn install
42yarn build
43
44# **OR** Using npm
45npm install
46npm run build
47```
48
49Then your dashboard is ready to use in the `/dist` directory.
50Use it like any static HTML content (use a webserver or open the html index directly).
51
52## Developement
53
54```sh
55# Using yarn (recommended)
56yarn install
57yarn serve
58
59# **OR** Using npm
60npm install
61npm run serve
62```
63
64### themes
65
66Theme are meant to be simple customization (written in [scss](https://sass-lang.com/documentation/syntax)).
67To addd a new theme, just add a file in the theme directory, and put all style in the `body #app.theme-<name>` scope. Then import it in the main style file.
68
69```scss
70// `src/assets/themes/my-awesome-theme.scss`
71body #app.theme-my-awesome-theme. { ... }
72```
73
74```scss
75// `src/assets/app.scss`
76// Themes import
77@import "./themes/sui.scss";
78...
79@import "./themes/my-awesome-theme.scss";
80```
35 81
36## Configuration 82## Configuration
37 83
@@ -42,12 +88,46 @@ Title, icons, links, colors, and services can be configured in the `config.yml`
42# Homepage configuration 88# Homepage configuration
43# See https://fontawesome.com/icons for icons options 89# See https://fontawesome.com/icons for icons options
44 90
45title: "Simple homepage" 91title: "App dashboard"
46subtitle: "Homer" 92subtitle: "Homer"
47logo: "assets/homer.png" 93logo: "assets/homer.png"
48# Alternatively a fa icon can be provided: 94# Alternatively a fa icon can be provided:
49# icon: "fas fa-skull-crossbones" 95# icon: "fas fa-skull-crossbones"
50footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.header: 96
97header: true # Set to false to hide the header
98footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.header:
99
100# Optional theming
101theme: default # 'default' or one of the theme available in 'src/assets/themes'.
102
103# Here is the exaustive list of customization parameters
104# However all value are optional and will fallback to default if not set.
105# if you want to change only some of the colors, feel free to remove all unused key.
106colors:
107 light:
108 highlight-primary: "#3367d6"
109 highlight-secondary: "#4285f4"
110 highlight-hover: "#5a95f5"
111 background: "#f5f5f5"
112 card-background: "#ffffff"
113 text: "#363636"
114 text-header: "#424242"
115 text-title: "#303030"
116 text-subtitle: "#424242"
117 card-shadow: rgba(0, 0, 0, 0.1)
118 link-hover: "#363636"
119 dark:
120 highlight-primary: "#3367d6"
121 highlight-secondary: "#4285f4"
122 highlight-hover: "#5a95f5"
123 background: "#131313"
124 card-background: "#2b2b2b"
125 text: "#eaeaea"
126 text-header: "#ffffff"
127 text-title: "#fafafa"
128 text-subtitle: "#f5f5f5"
129 card-shadow: rgba(0, 0, 0, 0.4)
130 link-hover: "#ffdd57"
51 131
52# Optional message 132# Optional message
53message: 133message:
@@ -62,7 +142,7 @@ links:
62 - name: "ansible" 142 - name: "ansible"
63 icon: "fab fa-github" 143 icon: "fab fa-github"
64 url: "https://github.com/xxxxx/ansible/" 144 url: "https://github.com/xxxxx/ansible/"
65 target: '_blank' # optional html a tag target attribute 145 target: "_blank" # optional html a tag target attribute
66 - name: "Wiki" 146 - name: "Wiki"
67 icon: "fas fa-book" 147 icon: "fas fa-book"
68 url: "https://wiki.xxxxxx.com/" 148 url: "https://wiki.xxxxxx.com/"
@@ -81,7 +161,7 @@ services:
81 subtitle: "Continuous integration server" 161 subtitle: "Continuous integration server"
82 tag: "CI" 162 tag: "CI"
83 url: "#" 163 url: "#"
84 target: '_blank' # optional html a tag target attribute 164 target: "_blank" # optional html a tag target attribute
85 - name: "RabbitMQ Management" 165 - name: "RabbitMQ Management"
86 logo: "/assets/tools/rabbitmq.png" 166 logo: "/assets/tools/rabbitmq.png"
87 subtitle: "Manage & monitor RabbitMQ server" 167 subtitle: "Manage & monitor RabbitMQ server"
@@ -111,7 +191,6 @@ services:
111 subtitle: "Pingdom public reports overview" 191 subtitle: "Pingdom public reports overview"
112 tag: "CI" 192 tag: "CI"
113 url: "#" 193 url: "#"
114
115``` 194```
116 195
117If you choose to fetch message information from an endpoint, the output format should be: 196If you choose to fetch message information from an endpoint, the output format should be: