aboutsummaryrefslogtreecommitdiffhomepage
path: root/README.md
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2020-05-30 23:22:02 -0700
committerGitHub <noreply@github.com>2020-05-30 23:22:02 -0700
commit5fa6b6cfa6b3010279ead23088add5c5664e8ac0 (patch)
tree5f3ffa4dc62b4355d38346ef0155878ca6aeedcd /README.md
parentab7ac44c191e3b7dea696e76b74097e23f73b18c (diff)
parent9052ec59b75a37b4518ad39c493ee6c2d4198b98 (diff)
downloadhomer-5fa6b6cfa6b3010279ead23088add5c5664e8ac0.tar.gz
homer-5fa6b6cfa6b3010279ead23088add5c5664e8ac0.tar.zst
homer-5fa6b6cfa6b3010279ead23088add5c5664e8ac0.zip
Merge pull request #62 from bastienwirtz/dev/build-system120405250
Build system integration using vue-cli.
Diffstat (limited to 'README.md')
-rw-r--r--README.md115
1 files changed, 98 insertions, 17 deletions
diff --git a/README.md b/README.md
index f03152b..8151c4d 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,37 +17,119 @@ 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
28```sh 30```sh
29sudo docker run -p 8080:8080 -v /your/local/config.yml:/www/config.yml -v /your/local/assets/:/www/assets b4bz/homer:latest 31docker run -p 8080:8080 -v /your/local/config.yml:/www/config.yml -v /your/local/assets/:/www/assets b4bz/homer:latest
30``` 32```
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.
50The `dist` directory is meant to be served by an HTTP server, so **it will not work if you open dist/index.html directly over file:// protocol**.
51
52Use it like any static HTML content (use a webserver or open the html index directly).
53
54## Developement
55
56```sh
57# Using yarn (recommended)
58yarn install
59yarn serve
60
61# **OR** Using npm
62npm install
63npm run serve
64```
65
66### Themes
67
68Themes are meant to be simple customization (written in [scss](https://sass-lang.com/documentation/syntax)).
69To 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.
70
71```scss
72// `src/assets/themes/my-awesome-theme.scss`
73body #app.theme-my-awesome-theme. { ... }
74```
75
76```scss
77// `src/assets/app.scss`
78// Themes import
79@import "./themes/sui.scss";
80...
81@import "./themes/my-awesome-theme.scss";
82```
35 83
36## Configuration 84## Configuration
37 85
38Title, icons, links, colors, and services can be configured in the `config.yml` file, using [yaml](http://yaml.org/) format. 86Title, icons, links, colors, and services can be configured in the `config.yml` file (located in project root directory once built, or in the `public/` directory in developement mode), using [yaml](http://yaml.org/) format.
39 87
40```yaml 88```yaml
41--- 89---
42# Homepage configuration 90# Homepage configuration
43# See https://fontawesome.com/icons for icons options 91# See https://fontawesome.com/icons for icons options
44 92
45title: "Simple homepage" 93title: "App dashboard"
46subtitle: "Homer" 94subtitle: "Homer"
47logo: "assets/homer.png" 95logo: "assets/homer.png"
48# Alternatively a fa icon can be provided: 96# Alternatively a fa icon can be provided:
49# icon: "fas fa-skull-crossbones" 97# 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: 98
99header: true # Set to false to hide the header
100footer: '<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:
101
102# Optional theming
103theme: default # 'default' or one of the theme available in 'src/assets/themes'.
104
105# Here is the exaustive list of customization parameters
106# However all value are optional and will fallback to default if not set.
107# if you want to change only some of the colors, feel free to remove all unused key.
108colors:
109 light:
110 highlight-primary: "#3367d6"
111 highlight-secondary: "#4285f4"
112 highlight-hover: "#5a95f5"
113 background: "#f5f5f5"
114 card-background: "#ffffff"
115 text: "#363636"
116 text-header: "#424242"
117 text-title: "#303030"
118 text-subtitle: "#424242"
119 card-shadow: rgba(0, 0, 0, 0.1)
120 link-hover: "#363636"
121 dark:
122 highlight-primary: "#3367d6"
123 highlight-secondary: "#4285f4"
124 highlight-hover: "#5a95f5"
125 background: "#131313"
126 card-background: "#2b2b2b"
127 text: "#eaeaea"
128 text-header: "#ffffff"
129 text-title: "#fafafa"
130 text-subtitle: "#f5f5f5"
131 card-shadow: rgba(0, 0, 0, 0.4)
132 link-hover: "#ffdd57"
51 133
52# Optional message 134# Optional message
53message: 135message:
@@ -62,7 +144,7 @@ links:
62 - name: "ansible" 144 - name: "ansible"
63 icon: "fab fa-github" 145 icon: "fab fa-github"
64 url: "https://github.com/xxxxx/ansible/" 146 url: "https://github.com/xxxxx/ansible/"
65 target: '_blank' # optional html a tag target attribute 147 target: "_blank" # optional html tag target attribute
66 - name: "Wiki" 148 - name: "Wiki"
67 icon: "fas fa-book" 149 icon: "fas fa-book"
68 url: "https://wiki.xxxxxx.com/" 150 url: "https://wiki.xxxxxx.com/"
@@ -81,7 +163,7 @@ services:
81 subtitle: "Continuous integration server" 163 subtitle: "Continuous integration server"
82 tag: "CI" 164 tag: "CI"
83 url: "#" 165 url: "#"
84 target: '_blank' # optional html a tag target attribute 166 target: "_blank" # optional html tag target attribute
85 - name: "RabbitMQ Management" 167 - name: "RabbitMQ Management"
86 logo: "/assets/tools/rabbitmq.png" 168 logo: "/assets/tools/rabbitmq.png"
87 subtitle: "Manage & monitor RabbitMQ server" 169 subtitle: "Manage & monitor RabbitMQ server"
@@ -111,7 +193,6 @@ services:
111 subtitle: "Pingdom public reports overview" 193 subtitle: "Pingdom public reports overview"
112 tag: "CI" 194 tag: "CI"
113 url: "#" 195 url: "#"
114
115``` 196```
116 197
117If you choose to fetch message information from an endpoint, the output format should be: 198If you choose to fetch message information from an endpoint, the output format should be: