doc: minor improvements

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 </your/local/assets/>:/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 <your-UID>:<your-GID>` 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 <your-UID>:<your-GID>` 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:**
 

docker-compose.yml

@@ -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

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:

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"

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"

src/components/ConnectivityChecker.vue

@@ -1,10 +1,13 @@
 <template>
-  <div v-if="offline" class="offline-message">
-    <i class="far fa-dizzy"></i>
+  <div v-if="offline" class="offline-message mb-4">
+    <i class="fa-solid fa-triangle-exclamation"></i>
     <h1>
-      You're offline, friend.
+      Network unreachable 
       <span @click="checkOffline"> <i class="fas fa-redo-alt"></i></span>
     </h1>
+    <p>
+      <a href="https://github.com/bastienwirtz/homer/blob/main/docs/configuration.md#connectivity-checks">More information →</a>
+    </p>
   </div>
 </template>
 

src/components/GetStarted.vue

@@ -1,8 +1,8 @@
 <template>
   <article>
-    <div class="m-6 has-text-centered py-6">
-      <p class="is-size-5 mb-0">No configured service found!</p>
-      <p>Check out the documentation to start building your Homer dashboard.</p>
+    <div class="m-6 has-text-centered py-6 title">
+      <p class="is-size-5 mb-2">No configuration found!</p>
+      <p>Check out the documentation to start building your dashboard.</p>
       <p>
         <a
           class="button is-primary mt-5 has-text-weight-bold"
@@ -23,10 +23,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-p {
-  color: #4a4a4a;
-}
-
 body #app a {
   font-weight: 900;
   color: #ffffff;