aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2020-06-11 22:40:36 -0700
committerBastien Wirtz <bastien.wirtz@gmail.com>2020-06-11 22:48:22 -0700
commit1bc75494cae6efd5a0fdff3195db110451bad2ec (patch)
treed9d505377933d6d92276ef1b37a6477684b8ac7a
parentcad54a560f77382d9584fd804f9cdd84c92012b7 (diff)
downloadhomer-1bc75494cae6efd5a0fdff3195db110451bad2ec.tar.gz
homer-1bc75494cae6efd5a0fdff3195db110451bad2ec.tar.zst
homer-1bc75494cae6efd5a0fdff3195db110451bad2ec.zip
Split documentation into separate files
-rw-r--r--README.md173
-rw-r--r--docs/configuration.md131
-rw-r--r--docs/developement.md29
-rw-r--r--docs/tips-and-tricks.md131
4 files changed, 298 insertions, 166 deletions
diff --git a/README.md b/README.md
index 8818e32..65ef9ab 100644
--- a/README.md
+++ b/README.md
@@ -14,9 +14,11 @@ ervices on hand, from a simple `yaml` configuration file.
14## Table of Contents 14## Table of Contents
15- [Features](#features) 15- [Features](#features)
16- [Getting started](#getting-started) 16- [Getting started](#getting-started)
17- [Configuration](#configuration) 17- [Configuration](docs/configuration.md)
18- [Tips & tricks](docs/tips-and-tricks.md)
18- [Roadmap](#roadmap) 19- [Roadmap](#roadmap)
19- [Developement](#developement) 20- [Developement](docs/developement.md)
21
20 22
21## Features 23## Features
22- [yaml](http://yaml.org/) file configuration 24- [yaml](http://yaml.org/) file configuration
@@ -36,6 +38,8 @@ ervices on hand, from a simple `yaml` configuration file.
36 38
37Homer 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**. 39Homer 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**.
38 40
41For more information about the `config.yml` file see [configuration](docs/configuration.md) the section.
42
39### Using docker 43### Using docker
40 44
41```sh 45```sh
@@ -76,171 +80,8 @@ npm run build
76 80
77Then your dashboard is ready to use in the `/dist` directory. 81Then your dashboard is ready to use in the `/dist` directory.
78 82
79## Configuration
80
81Title, 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.
82
83```yaml
84---
85# Homepage configuration
86# See https://fontawesome.com/icons for icons options
87
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
92title: "App dashboard"
93subtitle: "Homer"
94logo: "assets/homer.png"
95# Alternatively a fa icon can be provided:
96# icon: "fas fa-skull-crossbones"
97
98header: true # Set to false to hide the header
99footer: '<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.
100
101columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12)
102connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example)
103
104# Optional theming
105theme: 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.
110colors:
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"
135
136# Optional message
137message:
138 # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
139 style: "is-warning"
140 title: "Optional message!"
141 content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
142
143# Optional navbar
144# links: [] # Allows for navbar (dark mode, layout, and search) without any links
145links:
146 - name: "Link 1"
147 icon: "fab fa-github"
148 url: "https://github.com/bastienwirtz/homer"
149 target: "_blank" # optional html tag target attribute
150 - name: "link 2"
151 icon: "fas fa-book"
152 url: "https://github.com/bastienwirtz/homer"
153
154# Services
155# First level array represent a group.
156# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
157services:
158 - name: "Application"
159 icon: "fa fa-code-fork"
160 items:
161 - name: "Awesome app"
162 logo: "assets/tools/sample.png"
163 # Alternatively a fa icon can be provided:
164 # icon: "fab fa-jenkins"
165 subtitle: "Bookmark example"
166 tag: "app"
167 url: "https://www.reddit.com/r/selfhosted/"
168 target: "_blank" # optional html tag target attribute
169 - name: "Another one"
170 logo: "assets/tools/sample2.png"
171 subtitle: "Another application"
172 tag: "app"
173 # Optional tagstyle
174 tagstyle: "is-success"
175 url: "#"
176 - name: "Other group"
177 icon: "fas fa-heartbeat"
178 items:
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
185```
186
187If you choose to fetch message information from an endpoint, the output format should be:
188
189```json
190{
191 "style": null,
192 "title": "Lorem ipsum 42",
193 "content": "LA LA LA Lorem ipsum dolor sit amet, ....."
194}
195```
196
197`null` value or missing keys will be ignored and value from the `config.yml` will be used if available.
198Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar).
199
200### Style Options
201
202Homer 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
209You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/) for other options regarding size, style, or state.
210
211 83
212## Roadmap 84## Roadmap
213 85
214- [ ] Add more themes. 86- [ ] Add new themes.
215- [ ] Add support for custom service card (add custom feature to some service / app link) 87- [ ] 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)
222yarn install
223yarn serve
224
225# **OR** Using npm
226npm install
227npm run serve
228```
229
230### Themes
231
232Themes are meant to be simple customization (written in [scss](https://sass-lang.com/documentation/syntax)).
233To 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`
237body #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```
diff --git a/docs/configuration.md b/docs/configuration.md
new file mode 100644
index 0000000..a2469ed
--- /dev/null
+++ b/docs/configuration.md
@@ -0,0 +1,131 @@
1## Configuration
2
3Title, 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.
4
5```yaml
6---
7# Homepage configuration
8# See https://fontawesome.com/icons for icons options
9
10# Optional: Use external configuration file.
11# Using this will ignore remaining config in this file
12# externalConfig: https://example.com/server-luci/config.yaml
13
14title: "App dashboard"
15subtitle: "Homer"
16logo: "assets/homer.png"
17# Alternatively a fa icon can be provided:
18# icon: "fas fa-skull-crossbones"
19
20header: true # Set to false to hide the header
21footer: '<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.
22
23columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12)
24connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example)
25
26# Optional theming
27theme: default # 'default' or one of the theme available in 'src/assets/themes'.
28
29# Here is the exaustive list of customization parameters
30# However all value are optional and will fallback to default if not set.
31# if you want to change only some of the colors, feel free to remove all unused key.
32colors:
33 light:
34 highlight-primary: "#3367d6"
35 highlight-secondary: "#4285f4"
36 highlight-hover: "#5a95f5"
37 background: "#f5f5f5"
38 card-background: "#ffffff"
39 text: "#363636"
40 text-header: "#424242"
41 text-title: "#303030"
42 text-subtitle: "#424242"
43 card-shadow: rgba(0, 0, 0, 0.1)
44 link-hover: "#363636"
45 dark:
46 highlight-primary: "#3367d6"
47 highlight-secondary: "#4285f4"
48 highlight-hover: "#5a95f5"
49 background: "#131313"
50 card-background: "#2b2b2b"
51 text: "#eaeaea"
52 text-header: "#ffffff"
53 text-title: "#fafafa"
54 text-subtitle: "#f5f5f5"
55 card-shadow: rgba(0, 0, 0, 0.4)
56 link-hover: "#ffdd57"
57
58# Optional message
59message:
60 # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
61 style: "is-warning"
62 title: "Optional message!"
63 content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
64
65# Optional navbar
66# links: [] # Allows for navbar (dark mode, layout, and search) without any links
67links:
68 - name: "Link 1"
69 icon: "fab fa-github"
70 url: "https://github.com/bastienwirtz/homer"
71 target: "_blank" # optional html tag target attribute
72 - name: "link 2"
73 icon: "fas fa-book"
74 url: "https://github.com/bastienwirtz/homer"
75
76# Services
77# First level array represent a group.
78# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
79services:
80 - name: "Application"
81 icon: "fa fa-code-fork"
82 items:
83 - name: "Awesome app"
84 logo: "assets/tools/sample.png"
85 # Alternatively a fa icon can be provided:
86 # icon: "fab fa-jenkins"
87 subtitle: "Bookmark example"
88 tag: "app"
89 url: "https://www.reddit.com/r/selfhosted/"
90 target: "_blank" # optional html tag target attribute
91 - name: "Another one"
92 logo: "assets/tools/sample2.png"
93 subtitle: "Another application"
94 tag: "app"
95 # Optional tagstyle
96 tagstyle: "is-success"
97 url: "#"
98 - name: "Other group"
99 icon: "fas fa-heartbeat"
100 items:
101 - name: "Another app"
102 logo: "assets/tools/sample.png"
103 subtitle: "Another example"
104 tag: "other"
105 url: "https://www.reddit.com/r/selfhosted/"
106 target: "_blank" # optionnal html a tag target attribute
107```
108
109If you choose to fetch message information from an endpoint, the output format should be:
110
111```json
112{
113 "style": null,
114 "title": "Lorem ipsum 42",
115 "content": "LA LA LA Lorem ipsum dolor sit amet, ....."
116}
117```
118
119`null` value or missing keys will be ignored and value from the `config.yml` will be used if available.
120Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar).
121
122### Style Options
123
124Homer 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:
125
126- `is-info` (blue)
127- `is-success` (green)
128- `is-warning` (yellow)
129- `is-danger` (red)
130
131You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/) for other options regarding size, style, or state.
diff --git a/docs/developement.md b/docs/developement.md
new file mode 100644
index 0000000..6ea1cba
--- /dev/null
+++ b/docs/developement.md
@@ -0,0 +1,29 @@
1## Developement
2
3```sh
4# Using yarn (recommended)
5yarn install
6yarn serve
7
8# **OR** Using npm
9npm install
10npm run serve
11```
12
13### Themes
14
15Themes are meant to be simple customization (written in [scss](https://sass-lang.com/documentation/syntax)).
16To 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.
17
18```scss
19// `src/assets/themes/my-awesome-theme.scss`
20body #app.theme-my-awesome-theme. { ... }
21```
22
23```scss
24// `src/assets/app.scss`
25// Themes import
26@import "./themes/sui.scss";
27...
28@import "./themes/my-awesome-theme.scss";
29```
diff --git a/docs/tips-and-tricks.md b/docs/tips-and-tricks.md
new file mode 100644
index 0000000..f72f92b
--- /dev/null
+++ b/docs/tips-and-tricks.md
@@ -0,0 +1,131 @@
1# Tips & Tricks
2
3Here is a collection of neat tips and tricks that Homer users have come up with!
4
5## Use Homer as a custom "new tab" page
6#### `by @vosdev`
7
8This [extension](https://addons.mozilla.org/firefox/addon/custom-new-tab-page) allows you to have your homer dashboard in your new tab page, while leaving focus on the address bar meaning you can still type right away if you want to search or go to a page that is not on your homer dash.
9
10The extension loads Homer in an iframe on your new tab page, meaning you have to add `target: '_top'` to each of your items.
11
12```yaml
13- name: "Reddit"
14 logo: "assets/daily/reddit.png"
15 url: "https://reddit.com"
16 target: '_top'
17
18- name: "YouTube"
19 logo: "assets/daily/youtube.png"
20 url: "https://youtube.com"
21 target: '_top'
22```
23
24## Use Homer as a custom "new tab" page
25#### `by @vosdev`
26
27This [extension](https://addons.mozilla.org/firefox/addon/custom-new-tab-page) allows you to have your homer dashboard in your new tab page, while leaving focus on the address bar meaning you can still type right away if you want to search or go to a page that is not on your homer dash.
28
29The extension loads Homer in an iframe on your new tab page, meaning you have to add `target: '_top'` to each of your items.
30
31```yaml
32- name: "Reddit"
33 logo: "assets/daily/reddit.png"
34 url: "https://reddit.com"
35 target: '_top'
36
37- name: "YouTube"
38 logo: "assets/daily/youtube.png"
39 url: "https://youtube.com"
40 target: '_top'
41```
42
43## YAML Anchors
44#### `by @JamiePhonic`
45
46Since Homer is configured using YAML, it supports all of YAML's helpful fetaures, such as anchoring!
47
48For example, you can define tags and tag styles for each "item" in a service.
49Using Anchoring, you can define all your tags and their styles once like this: (for example)
50
51```yaml
52# Some pre-defined tag styles. reference these using <<: *{NAME} inside an item definition; For Example, <<: *Apps
53tags:
54 Favourite: &Favourite
55 - tag: "Favourite"
56 tagstyle: "is-medium is-primary"
57 CI: &CI
58 - tag: "CI"
59 tagstyle: "is-medium is-success"
60 Apps: &Apps
61 - tag: "App"
62 tagstyle: "is-medium is-info"
63```
64
65and then simply reference these pre-defined (anchored) tags in each item like so:
66
67```yaml
68- name: "VS Code"
69 logo: "/assets/vscode.png"
70 subtitle: "Develope Code Anywhere, On Anything!"
71 <<: *App # Regerence to the predefined "App" Tag
72 url: "https://vscode.example.com/"
73 target: "_blank" # optional html tag target attribute
74````
75
76Then when Homer reads your config, it will substitute your anchors automatically, the the above example is equal to:
77
78```yaml
79- name: "VS Code"
80 logo: "/assets/vscode.png"
81 subtitle: "Develope Code Anywhere, On Anything!"
82 tag: "App"
83 tagstyle: "is-medium is-info"
84 url: "https://vscode.example.com/"
85 target: "_blank" # optional html tag target attribute
86```
87
88The end result is that if you want to update the name or style of any perticular tag, just update it once, in the tags section!
89Great if you have a lot of services or a lot of tags!
90
91## Remotely edit your config with Code Server
92#### `by @JamiePhonic`
93
94Homer doesn't yet provide a way to edit your configuration from inside Homer itself, but that doesnt mean it cant be done!
95
96You can setup and use [Code-Server](https://github.com/cdr/code-server) to edit your config.yml file from anywhere!
97
98If you're running Homer in docker, you can setup a Code-Server container and pass your homer config directory into it.
99Simply pass your homer config directory as and extra -v parameter to your code-server container:
100```
101-v '/your/local/homer/config-dir/':'/config/homer':'rw'
102```
103This will map your homer config directory (For example, /docker/appdata/homer/) into code-server's `/config/` directory, in a sub folder called `homer`
104
105As a bonus, Code-Server puts the "current folder" as a parameter in the URL bar, so you could add a `links:` entry in Homer that points to your code-server instance with the directory pre-filled for essentially 1 click editing!
106
107For example:
108```yml
109links:
110 - name: Edit config
111 icon: fas fa-cog
112 url: https://vscode.example.net/?folder=/config/homer
113 target: "_blank" # optional html tag target attribute
114```
115where the path after `?folder=` is the path to the folder where you mounted your homer config INSIDE the Code-Server container.
116
117### Example Code-Server docker create command
118```sh
119docker create \
120 --name=code-server \
121 -e PUID=1000 \
122 -e PGID=1000 \
123 -e TZ=Europe/London \
124 -e PASSWORD={YOUR_PASSWORD} `#optional` \
125 -e SUDO_PASSWORD={YOUR SUDO_PASSWORD} `#optional` \
126 -p 8443:8443 \
127 -v /path/to/appdata/config:/config \
128 -v /your/local/homer/config-dir/:/config/homer \
129 --restart unless-stopped \
130 linuxserver/code-server
131```