]>
Commit | Line | Data |
---|---|---|
09763dbf | 1 | # Homer |
e1470a8c BW |
2 | [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) |
3 | [![Contribution Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com) | |
897f67f0 | 4 | [![Gitter](https://badges.gitter.im/homer-dashboard/community.svg)](https://gitter.im/homer-dashboard/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) |
e1470a8c BW |
5 | [![Dowload](https://img.shields.io/badge/Dowload-homer.zip-orange)](https://github.com/bastienwirtz/homer/releases/latest/download/homer.zip) |
6 | [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/awesome-selfhosted/awesome-selfhosted) | |
7bb903e6 | 7 | |
e1470a8c BW |
8 | A dead simple static **HOM**epage for your serv**ER** to keep your s |
9 | ervices on hand, from a simple `yaml` configuration file. | |
09763dbf | 10 | |
897f67f0 | 11 | ## [Live demo](https://homer-demo.netlify.app) • [Chat](https://gitter.im/homer-dashboard/community) |
e1470a8c | 12 | ![screenshot](https://raw.github.com/bastienwirtz/homer/master/screenshot.png) |
a4de4a3a | 13 | |
e1470a8c BW |
14 | ## Table of Contents |
15 | - [Features](#features) | |
16 | - [Getting started](#getting-started) | |
17 | - [Configuration](#configuration) | |
18 | - [Roadmap](#roadmap) | |
19 | - [Developement](#developement) | |
a4de4a3a | 20 | |
e1470a8c BW |
21 | ## Features |
22 | - [yaml](http://yaml.org/) file configuration | |
23 | - Installable (pwa) | |
24 | - Search | |
25 | - Grouping | |
26 | - Theme customization | |
27 | - Offline heathcheck | |
28 | - keyboard shortcuts: | |
29 | - `/` Start searching. | |
30 | - `Escape` Stop searching. | |
31 | - `Enter` Open the first matching result (respects the bookmark's `_target` property). | |
32 | - `Alt`/`Option` + `Enter` Open the first matching result in a new tab. | |
09763dbf | 33 | |
09763dbf | 34 | |
e1470a8c | 35 | ## Getting started |
22555b55 | 36 | |
e1470a8c | 37 | Homer is a full static html/js dashboard, generated from the source in `/src` using webpack. It's meant to be served by an HTTP server, **it will not work if you open dist/index.html directly over file:// protocol**. |
b79e6ed1 BW |
38 | |
39 | ### Using docker | |
40 | ||
41 | ```sh | |
2301d891 | 42 | docker run -p 8080:8080 -v /your/local/config.yml:/www/config.yml -v /your/local/assets/:/www/assets b4bz/homer:latest |
b79e6ed1 BW |
43 | ``` |
44 | ||
897f67f0 BW |
45 | As a bind mount is used here, docker will not copy the initial content of the `assets` directory to the mounted directory. |
46 | You can initialise your assets directory with the content provided in this repository | |
47 | ```sh | |
48 | cp -r /public/assets/* /your/local/assets/ | |
49 | ``` | |
50 | ||
51 | **Alternatively** if you just want to provide images/icons without customizing the other files (app manifest & pwa icons), you can mount a custom directory in the `www` directory and use it in your `config.yml` for icons path. | |
52 | ||
e1470a8c | 53 | ### Using the release tarball (prebuilt, ready to use) |
b9c5fcf0 | 54 | |
e1470a8c BW |
55 | Download and extract the latest the latest release (`homer.zip`) from the [release page](https://github.com/bastienwirtz/homer/releases), rename the `config.yml.dist` file to `config.yml`, and put it behind a webserver. |
56 | ||
b9c5fcf0 | 57 | ```sh |
e1470a8c BW |
58 | wget https://github.com/bastienwirtz/homer/releases/latest/download/homer.zip |
59 | unzip homer.zip | |
60 | cd homer | |
61 | cp config.yml.dist config.yml | |
62 | npx serve # or python -m http.server 8010 or apache, nginx ... | |
b9c5fcf0 BW |
63 | ``` |
64 | ||
e1470a8c | 65 | ### Build manually |
b9c5fcf0 BW |
66 | |
67 | ```sh | |
68 | # Using yarn (recommended) | |
69 | yarn install | |
e1470a8c | 70 | yarn build |
b9c5fcf0 BW |
71 | |
72 | # **OR** Using npm | |
73 | npm install | |
e1470a8c | 74 | npm run build |
b9c5fcf0 BW |
75 | ``` |
76 | ||
e1470a8c | 77 | Then your dashboard is ready to use in the `/dist` directory. |
e41196e7 | 78 | |
22555b55 | 79 | ## Configuration |
09763dbf | 80 | |
e1142750 | 81 | Title, 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. |
09763dbf | 82 | |
09763dbf BW |
83 | ```yaml |
84 | --- | |
85 | # Homepage configuration | |
e41196e7 | 86 | # See https://fontawesome.com/icons for icons options |
09763dbf | 87 | |
1a42e30a BW |
88 | # Optional: Use external configuration file. |
89 | # Using this will ignore remaining config in this file | |
90 | # externalConfig: https://example.com/server-luci/config.yaml | |
91 | ||
b9c5fcf0 | 92 | title: "App dashboard" |
09763dbf BW |
93 | subtitle: "Homer" |
94 | logo: "assets/homer.png" | |
e41196e7 | 95 | # Alternatively a fa icon can be provided: |
b9c5fcf0 BW |
96 | # icon: "fas fa-skull-crossbones" |
97 | ||
98 | header: true # Set to false to hide the header | |
6c305c61 | 99 | footer: '<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. |
b9c5fcf0 | 100 | |
9e4fe0d2 BW |
101 | columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12) |
102 | connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example) | |
103 | ||
b9c5fcf0 BW |
104 | # Optional theming |
105 | theme: default # 'default' or one of the theme available in 'src/assets/themes'. | |
106 | ||
107 | # Here is the exaustive list of customization parameters | |
108 | # However all value are optional and will fallback to default if not set. | |
109 | # if you want to change only some of the colors, feel free to remove all unused key. | |
110 | colors: | |
111 | light: | |
112 | highlight-primary: "#3367d6" | |
113 | highlight-secondary: "#4285f4" | |
114 | highlight-hover: "#5a95f5" | |
115 | background: "#f5f5f5" | |
116 | card-background: "#ffffff" | |
117 | text: "#363636" | |
118 | text-header: "#424242" | |
119 | text-title: "#303030" | |
120 | text-subtitle: "#424242" | |
121 | card-shadow: rgba(0, 0, 0, 0.1) | |
122 | link-hover: "#363636" | |
123 | dark: | |
124 | highlight-primary: "#3367d6" | |
125 | highlight-secondary: "#4285f4" | |
126 | highlight-hover: "#5a95f5" | |
127 | background: "#131313" | |
128 | card-background: "#2b2b2b" | |
129 | text: "#eaeaea" | |
130 | text-header: "#ffffff" | |
131 | text-title: "#fafafa" | |
132 | text-subtitle: "#f5f5f5" | |
133 | card-shadow: rgba(0, 0, 0, 0.4) | |
134 | link-hover: "#ffdd57" | |
09763dbf BW |
135 | |
136 | # Optional message | |
137 | message: | |
7fd9dc6f | 138 | # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below. |
e3212743 | 139 | style: "is-warning" |
09763dbf | 140 | title: "Optional message!" |
e1470a8c | 141 | content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." |
09763dbf BW |
142 | |
143 | # Optional navbar | |
5028088e | 144 | # links: [] # Allows for navbar (dark mode, layout, and search) without any links |
09763dbf | 145 | links: |
e1470a8c | 146 | - name: "Link 1" |
aabb7d53 | 147 | icon: "fab fa-github" |
e1470a8c | 148 | url: "https://github.com/bastienwirtz/homer" |
e1142750 | 149 | target: "_blank" # optional html tag target attribute |
e1470a8c | 150 | - name: "link 2" |
aabb7d53 | 151 | icon: "fas fa-book" |
e1470a8c | 152 | url: "https://github.com/bastienwirtz/homer" |
09763dbf BW |
153 | |
154 | # Services | |
155 | # First level array represent a group. | |
7312bdd6 | 156 | # Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed). |
09763dbf | 157 | services: |
e1470a8c | 158 | - name: "Application" |
aabb7d53 | 159 | icon: "fa fa-code-fork" |
09763dbf | 160 | items: |
e1470a8c BW |
161 | - name: "Awesome app" |
162 | logo: "assets/tools/sample.png" | |
e41196e7 BW |
163 | # Alternatively a fa icon can be provided: |
164 | # icon: "fab fa-jenkins" | |
e1470a8c BW |
165 | subtitle: "Bookmark example" |
166 | tag: "app" | |
167 | url: "https://www.reddit.com/r/selfhosted/" | |
e1142750 | 168 | target: "_blank" # optional html tag target attribute |
e1470a8c BW |
169 | - name: "Another one" |
170 | logo: "assets/tools/sample2.png" | |
171 | subtitle: "Another application" | |
172 | tag: "app" | |
7312bdd6 | 173 | # Optional tagstyle |
a2fdb8a9 | 174 | tagstyle: "is-success" |
09763dbf | 175 | url: "#" |
e1470a8c | 176 | - name: "Other group" |
aabb7d53 | 177 | icon: "fas fa-heartbeat" |
09763dbf | 178 | items: |
e1470a8c BW |
179 | - name: "Another app" |
180 | logo: "assets/tools/sample.png" | |
181 | subtitle: "Another example" | |
182 | tag: "other" | |
183 | url: "https://www.reddit.com/r/selfhosted/" | |
184 | target: "_blank" # optionnal html a tag target attribute | |
e41196e7 | 185 | ``` |
7fd9dc6f BW |
186 | |
187 | If you choose to fetch message information from an endpoint, the output format should be: | |
188 | ||
189 | ```json | |
190 | { | |
7bb903e6 FB |
191 | "style": null, |
192 | "title": "Lorem ipsum 42", | |
193 | "content": "LA LA LA Lorem ipsum dolor sit amet, ....." | |
7fd9dc6f BW |
194 | } |
195 | ``` | |
196 | ||
197 | `null` value or missing keys will be ignored and value from the `config.yml` will be used if available. | |
22555b55 | 198 | Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar). |
fcf5f412 IS |
199 | |
200 | ### Style Options | |
201 | ||
202 | 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: | |
203 | ||
204 | - `is-info` (blue) | |
205 | - `is-success` (green) | |
206 | - `is-warning` (yellow) | |
207 | - `is-danger` (red) | |
208 | ||
209 | You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/) for other options regarding size, style, or state. | |
e1470a8c BW |
210 | |
211 | ||
212 | ## Roadmap | |
213 | ||
214 | - [ ] Add more themes. | |
215 | - [ ] Add support for custom service card (add custom feature to some service / app link) | |
216 | ||
217 | ||
218 | ## Development | |
219 | ||
220 | ```sh | |
221 | # Using yarn (recommended) | |
222 | yarn install | |
223 | yarn serve | |
224 | ||
225 | # **OR** Using npm | |
226 | npm install | |
227 | npm run serve | |
228 | ``` | |
229 | ||
230 | ### Themes | |
231 | ||
232 | Themes are meant to be simple customization (written in [scss](https://sass-lang.com/documentation/syntax)). | |
233 | To 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. | |
234 | ||
235 | ```scss | |
236 | // `src/assets/themes/my-awesome-theme.scss` | |
237 | body #app.theme-my-awesome-theme. { ... } | |
238 | ``` | |
239 | ||
240 | ```scss | |
241 | // `src/assets/app.scss` | |
242 | // Themes import | |
243 | @import "./themes/sui.scss"; | |
244 | ... | |
245 | @import "./themes/my-awesome-theme.scss"; | |
246 | ``` |