Adds multiple pages based on different config files

diff --git a/docs/configuration.md b/docs/configuration.md
index a43d7f1d99f8eff942b0df0d30789c5adf0cd840..81de5904db94c7264b4b6140b43e08366e7aac41 100644 (file)
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -81,6 +81,11 @@ links:
   - name: "link 2"
     icon: "fas fa-book"
     url: "https://github.com/bastienwirtz/homer"
+  # this will link to a second homer page that will load config from page2.yml and keep default config values as in config.yml file
+  # see url field and assets/page.yml used in this example:
+  - name: "Second Page"
+    icon: "fas fa-file-alt"
+    url: "/page2"
 
 # Services
 # First level array represents a group.

diff --git a/public/assets/page2.yml b/public/assets/page2.yml
new file mode 100644 (file)
index 0000000..e10d706
--- /dev/null
+++ b/public/assets/page2.yml
@@ -0,0 +1,39 @@
+# this config is used by a page linked in the navbar
+# this pages will use the same configuration from config.yml, but will overwrite fields present here
+
+# this overwrites title and subtitle:
+title: "Page2"
+subtitle: "this is the second page"
+
+# this overwrites message config. Setting it to empty to remove message from this page and keep it only in the main one:
+message:
+
+# as we want to include a differente link here (so we can get back to home page), we need to replicate all links or they will be revome when overwriting the links field:
+links:
+  - name: "Home"
+    icon: "fas fa-home"
+    url: "/"
+  - name: "Contribute"
+    icon: "fab fa-github"
+    url: "https://github.com/bastienwirtz/homer"
+    target: "_blank" # optional html a tag target attribute
+  - name: "Wiki"
+    icon: "fas fa-book"
+    url: "https://www.wikipedia.org/"
+
+# we keep the first group from the main page, but remove the second group. We need to replicate that first group or it will be removed:
+services:
+  - name: "NEW"
+    icon: "fas fa-cloud"
+    items:
+      - name: "Awesome app"
+        logo: "assets/tools/sample.png"
+        subtitle: "Bookmark example"
+        tag: "app"
+        url: "https://www.reddit.com/r/selfhosted/"
+        target: "_blank"
+      - name: "Another one"
+        logo: "assets/tools/sample2.png"
+        subtitle: "Another application"
+        tag: "app"
+        url: "#"

diff --git a/src/App.vue b/src/App.vue
index dc473cacf406671d4f3f38c15179cc6337163746..03970edce642874a28dd8c70d59f2ec6cccd8361 100644 (file)
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,7 @@
       <section v-if="config.header" class="first-line">
         <div v-cloak class="container">
           <div class="logo">
-            <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
+            <a href="/"><img v-if="config.logo" :src="config.logo" alt="dashboard logo" /></a>
             <i v-if="config.icon" :class="config.icon"></i>
           </div>
           <div class="dashboard-title">
@@ -153,6 +153,13 @@ export default {
     let config;
     try {
       config = await this.getConfig();
+      const path = (window.location.pathname != '/') ? window.location.pathname : null;
+      if (path) {
+        let pathConfig = await this.getConfig(`assets${path}.yml`); // the slash (/) is included in the pathname
+        for (const prop in pathConfig) config[prop] = pathConfig[prop];
+      }
+      // config = await this.getConfig(path ? `assets/${path}.yml` : null);
+      //config = await (path ? this.getConfig(`assets/${path}.yml`) : this.getConfig())
     } catch (error) {
       console.log(error);
       config = this.handleErrors("⚠️ Error loading configuration", error);

diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue
index d41c4437442e46256749f2230d1fa3755892ab5f..e0e88bb9f7cab8ab89eb24bc7f57a2e3b31e47e3 100644 (file)
--- a/src/components/ConnectivityChecker.vue
+++ b/src/components/ConnectivityChecker.vue
@@ -33,7 +33,7 @@ export default {
   methods: {
     checkOffline: function () {
       let that = this;
-      return fetch(window.location.href + "?alive", {
+      return fetch(window.location.origin + "?alive", {
         method: "HEAD",
         cache: "no-store",
       })