Merge remote-tracking branch 'upstream/master' into feature/custom-card-colors

6 files changed, 64 insertions, 5 deletions

diff --git a/README.md b/README.md
index 33a15b1..b965f9b 100644
--- a/README.md
+++ b/README.md
@@ -70,12 +70,41 @@ See [documentation](docs/configuration.md) for information about the configurati
 
 ### Using docker
 
+To launch container :
+
 ```sh
 docker run -p 8080:8080 -v /your/local/assets/:/www/assets b4bz/homer:latest
 ```
 
 Default assets will be automatically installed in the `/www/assets` directory. Use `UID` and/or `GID` env var to change the assets owner (`docker run -e "UID=1000" -e "GID=1000" [...]`).
 
+### Using docker-compose
+
+The `docker-compose.yml` file must be edited to match your needs.
+Set the port and volume (equivalent to -p and -v arguments) :
+
+```yaml
+volumes:
+  - /your/local/assets/:/www/assets
+ports:
+  - 8080:8080
+```
+
+To launch container :
+
+```sh
+cd /path/to/docker-compose.yml
+docker-compose up -d
+```
+
+Default assets will be automatically installed in the `/www/assets` directory. Use `UID` and/or `GID` env var to change the assets owner, also in `docker-compose.yml` :
+
+```yaml
+environment:
+- UID=1000
+- GID=1000
+```
+
 ### Using the release tarball (prebuilt, ready to use)
 
 Download and extract the latest the latest release (`homer.zip`) from the [release page](https://github.com/bastienwirtz/homer/releases), rename the `assets/config.yml.dist` file to `assets/config.yml`, and put it behind a webserver.
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..85e9156
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,14 @@
+---
+version: "2"
+services:
+  homer:
+    image: b4bz/homer
+    container_name: homer
+    volumes:
+      - /your/local/assets/:/www/assets
+    ports:
+      - 8080:8080
+    #environment:
+    #  - UID=1000
+    #  - GID=1000
+    restart: unless-stopped
diff --git a/docs/configuration.md b/docs/configuration.md
index 9790751..a8c0619 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -26,6 +26,11 @@ connectivityCheck: true # whether you want to display a message when the apps ar
 # Optional theming
 theme: default # 'default' or one of the theme available in 'src/assets/themes'.
 
+# Optional custom stylesheet
+# Will load custom CSS files. Especially useful for custom icon sets.
+# stylesheet:
+#   - "assets/custom.css"
+
 # Here is the exaustive list of customization parameters
 # However all value are optional and will fallback to default if not set.
 # if you want to change only some of the colors, feel free to remove all unused key.
diff --git a/docs/tips-and-tricks.md b/docs/tips-and-tricks.md
index fda670d..175c271 100644
--- a/docs/tips-and-tricks.md
+++ b/docs/tips-and-tricks.md
@@ -5,9 +5,9 @@ Here is a collection of neat tips and tricks that Homer users have come up with!
 ## Use Homer as a custom "new tab" page
 #### `by @vosdev`
 
-This [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.
+These 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.
 
-The extension loads Homer in an iframe on your new tab page, meaning you have to add `target: '_top'` to each of your items.
+The firefox extension loads Homer in an iframe on your new tab page, meaning you have to add `target: '_top'` to each of your items.
 
 ```yaml
 - name: "Reddit"
diff --git a/src/App.vue b/src/App.vue
index d7054a7..03760fd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,7 @@
         <div v-cloak class="container">
           <div class="logo">
             <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
-            <i v-if="config.icon" :class="['fa-fw', config.icon]"></i>
+            <i v-if="config.icon" :class="config.icon"></i>
           </div>
           <div class="dashboard-title">
             <span class="headline">{{ config.subtitle }}</span>
@@ -160,6 +160,13 @@ export default {
     this.config = merge(defaults, config);
     this.services = this.config.services;
     document.title = `${this.config.title} | ${this.config.subtitle}`;
+    if (this.config.stylesheet) {
+      let stylesheet = '';
+      for (const file of this.config.stylesheet) {
+        stylesheet += `@import "${file}";`;
+      }
+      this.createStylesheet(stylesheet);
+    }
   },
   methods: {
     getConfig: function (path = "assets/config.yml") {
@@ -235,6 +242,11 @@ export default {
         },
       };
     },
+    createStylesheet: function(css) {
+      let style = document.createElement('style');
+      style.appendChild(document.createTextNode(css));
+      document.head.appendChild(style);
+    },
   },
 };
 </script>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index c688a3a..ae84166 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -28,8 +28,7 @@
             >
               <i
                 v-if="link.icon"
-                style="margin-right: 6px;"
-                :class="['fa-fw', link.icon]"
+                :class="['fa-fw', link.icon, { 'mr-2': link.name }]"
               ></i>
               {{ link.name }}
             </a>