diff --git a/README.md b/README.md index c628f04..4ed7d00 100644 --- a/README.md +++ b/README.md @@ -68,15 +68,39 @@ It's meant to be served by an HTTP server, **it will not work if you open the in ### Using docker +The configuration directory is bind mounted to make your dashboard easy to maintain. + +**Start the container with `docker run`** + ```sh +# Make sure your local config directory exists docker run -d \ + --name homer \ -p 8080:8080 \ - -v :/www/assets \ - --restart=always \ + --mount type=bind,source="/path/to/config/dir",target=/www/assets \ + --restart=unless-stopped \ b4bz/homer:latest ``` -The container will run using a user uid and gid 1000. Add `--user :` to the docker command to adjust it. Make sure this match the ownership of your assets directory. +> [!NOTE] +> The container will run using a user uid and gid 1000 by default, add `--user :` to the docker command to adjust it if necessary. Make sure this match the permissions of your assets directory. + +**or `docker-compose`** + +```yaml +services: + homer: + image: b4bz/homer + container_name: homer + volumes: + - /path/to/config/dir:/www/assets # Make sure your local config directory exists + ports: + - 8080:8080 + user: 1000:1000 # default + environment: + - INIT_ASSETS=1 # default, requires the config directory to be writable for the container user (see user option) + restart: unless-stopped +``` **Environment variables:** diff --git a/docker-compose.yml b/docker-compose.yml deleted file mode 100644 index 231e72a..0000000 --- a/docker-compose.yml +++ /dev/null @@ -1,15 +0,0 @@ ---- -version: "2" -services: - homer: - image: b4bz/homer - #To build from source, comment previous line and uncomment below - #build: . - container_name: homer - volumes: - - /your/local/assets/:/www/assets - ports: - - 8080:8080 - user: 1000:1000 # default - environment: - - INIT_ASSETS=1 # default diff --git a/docs/configuration.md b/docs/configuration.md index c1c366e..afc5a07 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -1,11 +1,18 @@ # Configuration -Title, 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. +Homer rely on a single [yaml](http://yaml.org/) configuration file, located in the `/assets` directory. +`.dist` sample configuration files are available to help you get started. Alternatively, the example below can be +copied into the config file. + +> [!NOTE] +> On docker installations, the sample configuration is automatically installed when no configuration is found **if** +> the configuration directory is writable to the docker user. If no configuration has been installed, check your +> container logs and your mounted configuration directory ownership & permissions ```yaml --- # Homepage configuration -# See https://fontawesome.com/v5/search for icons options +# See https://fontawesome.com/search for icons options # Optional: Use external configuration file. # Using this will ignore remaining config in this file @@ -173,6 +180,13 @@ If you choose to fetch message information from an endpoint, the output format s `null` value or missing keys will be ignored and value from the `config.yml` will be used if available. Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar). +## Connectivity checks + +As a webapp (PWA) the dashboard can still be displayed when your homer server is offline. +The connectivity checker periodically send a HEAD request bypassing the PWA cache to the dashbord page to make sure it's still reachable. + +It can be useful when you access your dashboard through a VPN or ssh tunnel for example, to know is your conection is up. It also helps when using an authentication proxy, it will reloads the page if the authentication expires (when a redirection is send in response to the HEAD request). + ## Style Options 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: diff --git a/public/assets/config-demo.yml.dist b/public/assets/config-demo.yml.dist index 283be7f..576f7a6 100644 --- a/public/assets/config-demo.yml.dist +++ b/public/assets/config-demo.yml.dist @@ -1,6 +1,6 @@ --- # Homepage configuration -# See https://fontawesome.com/v5/search for icons options +# See https://fontawesome.com/search for icons options title: "Demo dashboard" subtitle: "Homer" diff --git a/public/assets/config.yml.dist b/public/assets/config.yml.dist index f7dae53..8fe793d 100644 --- a/public/assets/config.yml.dist +++ b/public/assets/config.yml.dist @@ -1,6 +1,6 @@ --- # Homepage configuration -# See https://fontawesome.com/v6/search for icons options +# See https://fontawesome.com/search for icons options title: "Demo dashboard" subtitle: "Homer" diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue index ccb4702..e5a896f 100644 --- a/src/components/ConnectivityChecker.vue +++ b/src/components/ConnectivityChecker.vue @@ -1,10 +1,13 @@ diff --git a/src/components/GetStarted.vue b/src/components/GetStarted.vue index ded2392..7bc1eda 100644 --- a/src/components/GetStarted.vue +++ b/src/components/GetStarted.vue @@ -1,8 +1,8 @@