aboutsummaryrefslogtreecommitdiffhomepage
path: root/docs
diff options
context:
space:
mode:
Diffstat (limited to 'docs')
-rw-r--r--docs/configuration.md17
-rw-r--r--docs/customservices.md19
-rw-r--r--docs/development.md4
-rw-r--r--docs/tips-and-tricks.md18
4 files changed, 33 insertions, 25 deletions
diff --git a/docs/configuration.md b/docs/configuration.md
index 68711ec..d90981a 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -1,4 +1,4 @@
1## Configuration 1# Configuration
2 2
3Title, icons, links, colors, and services can be configured in the `config.yml` file (located in `/assets` directory once built, or in the `public/assets` directory in development mode), using [yaml](http://yaml.org/) format. 3Title, icons, links, colors, and services can be configured in the `config.yml` file (located in `/assets` directory once built, or in the `public/assets` directory in development mode), using [yaml](http://yaml.org/) format.
4 4
@@ -136,7 +136,6 @@ services:
136 # background: red # optional color for card to set color directly without custom stylesheet 136 # background: red # optional color for card to set color directly without custom stylesheet
137``` 137```
138 138
139
140View [Custom Services](customservices.md) for details about all available custom services (like PiHole) and how to configure them. 139View [Custom Services](customservices.md) for details about all available custom services (like PiHole) and how to configure them.
141 140
142If 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)): 141If 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)):
@@ -152,7 +151,7 @@ If you choose to fetch message information from an endpoint, the output format s
152`null` value or missing keys will be ignored and value from the `config.yml` will be used if available. 151`null` value or missing keys will be ignored and value from the `config.yml` will be used if available.
153Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar). 152Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar).
154 153
155### Style Options 154## Style Options
156 155
157Homer 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: 156Homer 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:
158 157
@@ -163,7 +162,7 @@ Homer uses [bulma CSS](https://bulma.io/), which provides a [modifiers syntax](h
163 162
164You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/) for other options regarding size, style, or state. 163You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers/syntax/) for other options regarding size, style, or state.
165 164
166### PWA Icons 165## PWA Icons
167 166
168In 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: 167In 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:
169 168
@@ -171,7 +170,7 @@ In order to easily generate all required icon preset for the PWA to work, a tool
171npx vue-pwa-asset-generator -a {your_512x512_source_png} -o {your_output_folder} 170npx vue-pwa-asset-generator -a {your_512x512_source_png} -o {your_output_folder}
172``` 171```
173 172
174### Supported services 173## Supported services
175 174
176Currently 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. 175Currently 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.
177 176
@@ -180,10 +179,12 @@ Currently the following services are supported for showing quick infos on the ca
180- PaperlessNG 179- PaperlessNG
181- Mealie 180- Mealie
182 181
183### Additional configuration 182## Additional configuration
183
184### Paperless
184 185
185#### Paperless
186For Paperless you need an API-Key which you have to store at the item in the field `apikey`. 186For Paperless you need an API-Key which you have to store at the item in the field `apikey`.
187 187
188#### Mealie 188### Mealie
189
189First 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. 190First 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/customservices.md b/docs/customservices.md
index 150e232..83d5f3e 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -1,7 +1,7 @@
1# Custom Services 1# Custom Services
2 2
3Some service can use a specific a component that provides some extra features by adding a `type` key to the service yaml 3Some service can use a specific a component that provides some extra features by adding a `type` key to the service yaml
4configuration. Available services are in `src/components/`. Here is an overview of all custom services that are available 4configuration. Available services are in `src/components/`. Here is an overview of all custom services that are available
5within Homer. 5within Homer.
6 6
7## PiHole 7## PiHole
@@ -10,7 +10,7 @@ Using the PiHole service you can display info about your local PiHole instance r
10 10
11The following configuration is available for the PiHole service. 11The following configuration is available for the PiHole service.
12 12
13``` 13```yaml
14 items: 14 items:
15 - name: "Pi-hole" 15 - name: "Pi-hole"
16 logo: "assets/tools/sample.png" 16 logo: "assets/tools/sample.png"
@@ -19,13 +19,12 @@ The following configuration is available for the PiHole service.
19 type: "PiHole" 19 type: "PiHole"
20``` 20```
21 21
22
23## OpenWeatherMap 22## OpenWeatherMap
24 23
25Using the OpenWeatherMap service you can display weather information about a given location. 24Using the OpenWeatherMap service you can display weather information about a given location.
26The following configuration is available for the OpenWeatherMap service: 25The following configuration is available for the OpenWeatherMap service:
27 26
28``` 27```yaml
29items: 28items:
30 - name: "Weather" 29 - name: "Weather"
31 location: "Amsterdam" # your location. 30 location: "Amsterdam" # your location.
@@ -39,36 +38,36 @@ items:
39**Remarks:** 38**Remarks:**
40If for some reason your city can't be found by entering the name in the `location` property, you could also try to configure the OWM city ID in the `locationId` property. To retrieve your specific City ID, go to the [OWM website](https://openweathermap.org), search for your city and retrieve the ID from the URL (for example, the City ID of Amsterdam is 2759794). 39If for some reason your city can't be found by entering the name in the `location` property, you could also try to configure the OWM city ID in the `locationId` property. To retrieve your specific City ID, go to the [OWM website](https://openweathermap.org), search for your city and retrieve the ID from the URL (for example, the City ID of Amsterdam is 2759794).
41 40
42
43## Medusa 41## Medusa
44 42
45This service displays News (grey), Warning (orange) or Error (red) notifications bubbles from the Medusa application. 43This service displays News (grey), Warning (orange) or Error (red) notifications bubbles from the Medusa application.
46Two lines are needed in the config.yml : 44Two lines are needed in the config.yml :
47``` 45
46```yaml
48type: "Medusa" 47type: "Medusa"
49apikey: "01234deb70424befb1f4ef6a23456789" 48apikey: "01234deb70424befb1f4ef6a23456789"
50``` 49```
50
51The url must be the root url of Medusa application. 51The url must be the root url of Medusa application.
52The Medusa API key can be found in General configuration > Interface. It is needed to access Medusa API. 52The Medusa API key can be found in General configuration > Interface. It is needed to access Medusa API.
53 53
54
55## Sonarr/Radarr 54## Sonarr/Radarr
56 55
57This service displays Activity (blue), Warning (orange) or Error (red) notifications bubbles from the Radarr/Sonarr application. 56This service displays Activity (blue), Warning (orange) or Error (red) notifications bubbles from the Radarr/Sonarr application.
58Two lines are needed in the config.yml : 57Two lines are needed in the config.yml :
59``` 58
59```yaml
60type: "Radarr" or "Sonarr" 60type: "Radarr" or "Sonarr"
61apikey: "01234deb70424befb1f4ef6a23456789" 61apikey: "01234deb70424befb1f4ef6a23456789"
62``` 62```
63
63The url must be the root url of Radarr/Sonarr application. 64The url must be the root url of Radarr/Sonarr application.
64The Radarr/Sonarr API key can be found in Settings > General. It is needed to access the API. 65The Radarr/Sonarr API key can be found in Settings > General. It is needed to access the API.
65 66
66
67## PaperlessNG 67## PaperlessNG
68 68
69For Paperless you need an API-Key which you have to store at the item in the field `apikey`. 69For Paperless you need an API-Key which you have to store at the item in the field `apikey`.
70 70
71
72## Ping 71## Ping
73 72
74For Ping you need an API-Key which you have to store at the item in the field `apikey`. 73For Ping you need an API-Key which you have to store at the item in the field `apikey`.
diff --git a/docs/development.md b/docs/development.md
index f2e9020..5e432f1 100644
--- a/docs/development.md
+++ b/docs/development.md
@@ -1,4 +1,4 @@
1## Development 1# Development
2 2
3```sh 3```sh
4# Using yarn (recommended) 4# Using yarn (recommended)
@@ -10,7 +10,7 @@ npm install
10npm run serve 10npm run serve
11``` 11```
12 12
13### Themes 13## Themes
14 14
15Themes are meant to be simple customization (written in [scss](https://sass-lang.com/documentation/syntax)). 15Themes are meant to be simple customization (written in [scss](https://sass-lang.com/documentation/syntax)).
16To add 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. 16To add 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.
diff --git a/docs/tips-and-tricks.md b/docs/tips-and-tricks.md
index 94167fb..17bba9a 100644
--- a/docs/tips-and-tricks.md
+++ b/docs/tips-and-tricks.md
@@ -3,6 +3,7 @@
3Here is a collection of neat tips and tricks that Homer users have come up with! 3Here is a collection of neat tips and tricks that Homer users have come up with!
4 4
5## Use Homer as a custom "new tab" page 5## Use Homer as a custom "new tab" page
6
6#### `by @vosdev` 7#### `by @vosdev`
7 8
8These extensions for [Firefox](https://addons.mozilla.org/firefox/addon/custom-new-tab-page) and [Chrome & Friends](https://chrome.google.com/webstore/detail/new-tab-changer/occbjkhimchkolibngmcefpjlbknggfh) allow 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. 9These extensions for [Firefox](https://addons.mozilla.org/firefox/addon/custom-new-tab-page) and [Chrome & Friends](https://chrome.google.com/webstore/detail/new-tab-changer/occbjkhimchkolibngmcefpjlbknggfh) allow 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.
@@ -22,11 +23,12 @@ The Firefox extension loads Homer in an iframe on your new tab page, meaning you
22``` 23```
23 24
24## YAML Anchors 25## YAML Anchors
26
25#### `by @JamiePhonic` 27#### `by @JamiePhonic`
26 28
27Since Homer is configured using YAML, it supports all of YAML's helpful features, such as anchoring! 29Since Homer is configured using YAML, it supports all of YAML's helpful features, such as anchoring!
28 30
29For example, you can define tags and tag styles for each "item" in a service. 31For example, you can define tags and tag styles for each "item" in a service.
30Using Anchoring, you can define all your tags and their styles once like this: (for example) 32Using Anchoring, you can define all your tags and their styles once like this: (for example)
31 33
32```yaml 34```yaml
@@ -70,6 +72,7 @@ The end result is that if you want to update the name or style of any particular
70Great if you have a lot of services or a lot of tags! 72Great if you have a lot of services or a lot of tags!
71 73
72## Remotely edit your config with Code Server 74## Remotely edit your config with Code Server
75
73#### `by @JamiePhonic` 76#### `by @JamiePhonic`
74 77
75Homer doesn't yet provide a way to edit your configuration from inside Homer itself, but that doesn't mean it can't be done! 78Homer doesn't yet provide a way to edit your configuration from inside Homer itself, but that doesn't mean it can't be done!
@@ -78,14 +81,17 @@ You can setup and use [Code-Server](https://github.com/cdr/code-server) to edit
78 81
79If you're running Homer in docker, you can setup a Code-Server container and pass your homer config directory into it. 82If you're running Homer in docker, you can setup a Code-Server container and pass your homer config directory into it.
80Simply pass your homer config directory as an extra -v parameter to your code-server container: 83Simply pass your homer config directory as an extra -v parameter to your code-server container:
81``` 84
85```sh
82-v '/your/local/homer/config-dir/':'/config/homer':'rw' 86-v '/your/local/homer/config-dir/':'/config/homer':'rw'
83``` 87```
88
84This will map your homer config directory (For example, /docker/appdata/homer/) into code-server's `/config/` directory, in a sub folder called `homer` 89This will map your homer config directory (For example, /docker/appdata/homer/) into code-server's `/config/` directory, in a sub folder called `homer`
85 90
86As 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! 91As 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!
87 92
88For example: 93For example:
94
89```yml 95```yml
90links: 96links:
91 - name: Edit config 97 - name: Edit config
@@ -93,9 +99,11 @@ links:
93 url: https://vscode.example.net/?folder=/config/homer 99 url: https://vscode.example.net/?folder=/config/homer
94 target: "_blank" # optional html tag target attribute 100 target: "_blank" # optional html tag target attribute
95``` 101```
102
96where the path after `?folder=` is the path to the folder where you mounted your homer config INSIDE the Code-Server container. 103where the path after `?folder=` is the path to the folder where you mounted your homer config INSIDE the Code-Server container.
97 104
98### Example Code-Server docker create command 105### Example Code-Server docker create command
106
99```sh 107```sh
100docker create \ 108docker create \
101 --name=code-server \ 109 --name=code-server \
@@ -111,13 +119,13 @@ docker create \
111 linuxserver/code-server 119 linuxserver/code-server
112``` 120```
113 121
114
115## Get the news headlines in Homer 122## Get the news headlines in Homer
116 123
117### Mapping Fields 124### Mapping Fields
125
118Most times, the url you're getting headlines from follows a different schema than the one expected by Homer. 126Most times, the url you're getting headlines from follows a different schema than the one expected by Homer.
119 127
120For example, if you would like to show jokes from ChuckNorris.io, you'll find that the url https://api.chucknorris.io/jokes/random is giving you info like this: 128For example, if you would like to show jokes from ChuckNorris.io, you'll find that the url <https://api.chucknorris.io/jokes/random> is giving you info like this:
121 129
122```json 130```json
123{ 131{
@@ -179,6 +187,6 @@ If the URL you specified returns a JSON object that defines a `title` and `conte
179 187
180So, using [Node-Red](https://nodered.org/docs/getting-started/) and a quick flow, you can process an RSS feed to replace the message with a news item! 188So, using [Node-Red](https://nodered.org/docs/getting-started/) and a quick flow, you can process an RSS feed to replace the message with a news item!
181 189
182To get started, simply import [this flow](https://flows.nodered.org/flow/4b6406c9a684c26ace0430dd1826e95d) into your Node-Red instance and change the RSS feed in the "Get News RSS Feed" node to one of your choosing! 190To get started, simply import [this flow](https://flows.nodered.org/flow/4b6406c9a684c26ace0430dd1826e95d) into your Node-Red instance and change the RSS feed in the "Get News RSS Feed" node to one of your choosing!
183 191
184So far, the flow has been tested with BBC News and Sky News, however it should be easy to modify the flow to work with other RSS feeds if they don't work out of the box! 192So far, the flow has been tested with BBC News and Sky News, however it should be easy to modify the flow to work with other RSS feeds if they don't work out of the box!