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

diff --git a/README.md b/README.md
index 33a15b19f1af8a23c98719b4bf03f38456fab254..b965f9b58374b083393115e04ea286c1ba90eb48 100644 (file)
--- 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 (file)
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 979075136325debd7b6b72a4ec49967ab16c4c47..a8c0619487b5869ee5dbdaae4c3033f48d3f3439 100644 (file)
--- 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 fda670daadcd0b066ff68c8a1a580f5b4adef221..175c271c34fc6f020fd03ff7121a82c282816d41 100644 (file)
--- 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 d7054a7f453c8e0bd03eb0f64975482c44722d44..03760fdd3190119397bec6d48532373f06466afd 100644 (file)
--- 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 c688a3ab7528c6b79d67cfb9b3a652d99d1eaa83..ae8416688bcb737fb4c5eb539005ea7531060c34 100644 (file)
--- 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>