aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--docs/configuration.md43
-rw-r--r--docs/development.md29
-rw-r--r--docs/index.md4
-rw-r--r--docs/troubleshooting.md27
4 files changed, 67 insertions, 36 deletions
diff --git a/docs/configuration.md b/docs/configuration.md
index 4f97192..584ee79 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -185,9 +185,12 @@ services:
185 # background: red 185 # background: red
186``` 186```
187 187
188View [Custom Services](customservices.md) for details about all available custom services (like PiHole) and how to configure them. 188View [Custom Services](customservices.md) for details about all available custom
189services (like PiHole) and how to configure them.
189 190
190If you choose to fetch message information from an endpoint, the output format should be as follows (or you can [custom map fields as shown in tips-and-tricks](./tips-and-tricks.md#mapping-fields)): 191If you choose to fetch message information from an endpoint, the output format
192should be as follows (or you can
193[custom map fields as shown in tips-and-tricks](./tips-and-tricks.md#mapping-fields)):
191 194
192```json 195```json
193{ 196{
@@ -197,43 +200,31 @@ If you choose to fetch message information from an endpoint, the output format s
197} 200}
198``` 201```
199 202
200`null` value or missing keys will be ignored and value from the `config.yml` will be used if available. 203`null` value or missing keys will be ignored and value from the `config.yml`
201Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar). 204will be used if available. Empty values (either in `config.yml` or the endpoint
205data) will hide the element (ex: set `"title": ""` to hide the title bar).
202 206
203## Style Options 207## Style Options
204 208
205Homer 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: 209Homer uses [Bulma CSS](https://bulma.io/), which provides a
210[modifiers syntax](https://bulma.io/documentation/modifiers/syntax/). You'll
211notice in the config there is a `tagstyle` option. It can be set to any of the
212bulma modifiers. You'll probably want to use one of these 4 main colors:
206 213
207- `is-info` (blue) 214- `is-info` (blue)
208- `is-success` (green) 215- `is-success` (green)
209- `is-warning` (yellow) 216- `is-warning` (yellow)
210- `is-danger` (red) 217- `is-danger` (red)
211 218
212You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/) for other options regarding size, style, or state. 219You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/)
220for other options regarding size, style, or state.
213 221
214## PWA Icons 222## PWA Icons
215 223
216In order to easily generate all required icon preset for the PWA to work, a tool like [vue-pwa-asset-generator](https://www.npmjs.com/package/vue-pwa-asset-generator) can be used: 224In order to easily generate all required icon preset for the PWA to work, a tool
225like [vue-pwa-asset-generator](https://www.npmjs.com/package/vue-pwa-asset-generator)
226can be used:
217 227
218```bash 228```bash
219npx vue-pwa-asset-generator -a {your_512x512_source_png} -o {your_output_folder} 229npx vue-pwa-asset-generator -a {your_512x512_source_png} -o {your_output_folder}
220``` 230```
221
222## Supported services
223
224Currently the following services are supported for showing quick infos on the card. They can be used by setting the type to one of the following values at the item.
225
226- PiHole
227- AdGuardHome
228- PaperlessNG
229- Mealie
230
231## Additional configuration
232
233### Paperless
234
235For Paperless you need an API-Key which you have to store at the item in the field `apikey`.
236
237### Mealie
238
239First off make sure to remove an existing `subtitle` as it will take precedence if set. Setting `type: "Mealie"` will then show the number of recipes Mealie is keeping organized or the planned meal for today if one is planned. You will have to set an API key in the field `apikey` which can be created in your Mealie installation.
diff --git a/docs/development.md b/docs/development.md
index a22ae0b..c02406b 100644
--- a/docs/development.md
+++ b/docs/development.md
@@ -72,3 +72,32 @@ body #app.theme-my-awesome-theme. { ... }
72... 72...
73@import "./themes/my-awesome-theme.scss"; 73@import "./themes/my-awesome-theme.scss";
74``` 74```
75
76
77## Documentation
78
79### Install Python dependencies
80
81Homer's documentation is built using
82[Material for MkDocs](https://squidfunk.github.io/mkdocs-material/). To get
83started, you'll need Python 3 installed on your machine and set up your local
84environment.
85
86```sh
87python -m venv venv
88source venv/bin/activate
89pip install -r requirements.txt
90```
91
92### Preview local copy
93
94MkDocs comes with a command-line utility for building and serving the static
95documentation site every time you save a file. To launch it, run the `serve`
96command.
97
98```sh
99mkdocs serve
100```
101
102Your local version of the docs site will now be available at
103http://localhost:8000/.
diff --git a/docs/index.md b/docs/index.md
index 8ae670a..737162e 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -14,7 +14,7 @@ and serve!
14your hearts content using the long list of [configuration](/configuration) 14your hearts content using the long list of [configuration](/configuration)
15options available! Add links to all your relevant services and web apps, 15options available! Add links to all your relevant services and web apps,
16categorize them in groups, and in some cases, 16categorize them in groups, and in some cases,
17[get live status data](/custom_services) right there on your home page. Customize 17[get live status data](/custom_services) right there on your home page.
18your home page with your own images and CSS to make it fit your style! 18Customize your home page with your own images and CSS to make it fit your style!
19 19
20 20
diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
index 649e5a6..1b29e95 100644
--- a/docs/troubleshooting.md
+++ b/docs/troubleshooting.md
@@ -2,18 +2,29 @@
2 2
3## My custom service card doesn't work, nothing appears or offline status is displayed (pi-hole, sonarr, ping, ...) 3## My custom service card doesn't work, nothing appears or offline status is displayed (pi-hole, sonarr, ping, ...)
4 4
5You might by facing a [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross Origin Request Sharing) issue. 5You might by facing a [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
6It happens when the targeted service is hosted on a different domain or port. 6(Cross Origin Request Sharing) issue. It happens when the targeted service is
7Web browsers will not allow to fetch information from a different site without explicit permissions (the targeted service 7hosted on a different domain or port. Web browsers will not allow to fetch
8must include a special `Access-Control-Allow-Origin: *` HTTP headers). 8information from a different site without explicit permissions (the targeted
9If this happens your web console (`ctrl+shift+i` or `F12`) will be filled with this kind of errors: 9service must include a special `Access-Control-Allow-Origin: *` HTTP headers).
10If this happens your web console (`ctrl+shift+i` or `F12`) will be filled with
11this kind of errors:
10 12
11```text 13```text
12Access to fetch at 'https://<target-service>' from origin 'https://<homer>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 14Access to fetch at 'https://<target-service>' from origin 'https://<homer>' has
15been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
16on the requested resource. If an opaque response serves your needs, set the
17request's mode to 'no-cors' to fetch the resource with CORS disabled.
13``` 18```
14 19
15To resolve this, you can either: 20To resolve this, you can either:
16 21
17* Host all your target service under the same domain & port. 22* Host all your target service under the same domain & port.
18* Modify the target server configuration so that the response of the server included following header- `Access-Control-Allow-Origin: *` (<https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests>). It might be an option in the targeted service, otherwise depending on how the service is hosted, the proxy or web server can seamlessly add it. 23* Modify the target server configuration so that the response of the server
19* Use a cors proxy server like [`cors-container`](https://github.com/imjacobclark/cors-container), [`cors-anywhere`](https://github.com/Rob--W/cors-anywhere) or many others. 24included following header- `Access-Control-Allow-Origin: *`
25(<https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests>). It
26might be an option in the targeted service, otherwise depending on how the
27service is hosted, the proxy or web server can seamlessly add it.
28* Use a cors proxy server like
29[`cors-container`](https://github.com/imjacobclark/cors-container),
30[`cors-anywhere`](https://github.com/Rob--W/cors-anywhere) or many others.