Add a get started link when no configuration is found

package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "bulma": "^0.9.3",
-    "core-js": "^3.19.3",
+    "core-js": "^3.21.1",
     "js-yaml": "^4.1.0",
     "lodash.merge": "^4.6.2",
     "register-service-worker": "^1.7.2",

src/App.vue

@@ -56,6 +56,9 @@
           v-if="config.connectivityCheck"
           @network-status-update="offline = $event"
         />
+
+        <GetStarted v-if="loaded && !services" />
+
         <div v-if="!offline">
           <!-- Optional messages -->
           <Message :item="config.message" />
@@ -130,6 +133,7 @@ const jsyaml = require("js-yaml");
 const merge = require("lodash.merge");
 
 import Navbar from "./components/Navbar.vue";
+import GetStarted from "./components/GetStarted.vue";
 import ConnectivityChecker from "./components/ConnectivityChecker.vue";
 import Service from "./components/Service.vue";
 import Message from "./components/Message.vue";
@@ -144,6 +148,7 @@ export default {
   name: "App",
   components: {
     Navbar,
+    GetStarted,
     ConnectivityChecker,
     Service,
     Message,
@@ -154,6 +159,7 @@ export default {
   },
   data: function () {
     return {
+      loaded: false,
       config: null,
       services: null,
       offline: false,
@@ -166,6 +172,7 @@ export default {
   created: async function () {
     this.buildDashboard();
     window.onhashchange = this.buildDashboard;
+    this.loaded = true;
   },
   methods: {
     searchHotkey() {
@@ -193,6 +200,7 @@ export default {
       }
       this.config = merge(defaults, config);
       this.services = this.config.services;
+
       document.title =
         this.config.documentTitle ||
         `${this.config.title} | ${this.config.subtitle}`;

src/components/GetStarted.vue

@@ -0,0 +1,35 @@
+<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>
+      <p>
+        <a
+          class="button is-primary mt-5 has-text-weight-bold"
+          href="https://github.com/bastienwirtz/homer/blob/main/README.md#getting-started"
+          target="_blank"
+        >
+          Get started
+        </a>
+      </p>
+    </div>
+  </article>
+</template>
+
+<script>
+export default {
+  name: "GetStarted",
+};
+</script>
+
+<style lang="scss" scoped>
+p {
+  color: #4a4a4a;
+}
+
+body #app a {
+  font-weight: 900;
+  color: #ffffff;
+  font-family: "Lato", sans-serif;
+}
+</style>

src/components/services/Portainer.vue

@@ -8,7 +8,11 @@
         <strong v-if="dead > 0" class="notif dead" title="Dead">
           {{ dead }}
         </strong>
-        <strong v-if="misc > 0" class="notif misc" title="Other (creating, paused, exited, etc.)">
+        <strong
+          v-if="misc > 0"
+          class="notif misc"
+          title="Other (creating, paused, exited, etc.)"
+        >
           {{ misc }}
         </strong>
       </div>
@@ -55,7 +59,10 @@ export default {
         return "";
       }
       return this.containers.filter((container) => {
-        return container.State.toLowerCase() !== "running" && container.State.toLowerCase() !== "dead";
+        return (
+          container.State.toLowerCase() !== "running" &&
+          container.State.toLowerCase() !== "dead"
+        );
       }).length;
     },
   },
@@ -68,18 +75,20 @@ export default {
         "X-Api-Key": this.item.apikey,
       };
 
-      this.endpoints = await this.fetch("/api/endpoints", { headers })
-        .catch((e) => {
+      this.endpoints = await this.fetch("/api/endpoints", { headers }).catch(
+        (e) => {
           console.error(e);
-        });
+        }
+      );
 
       let containers = [];
       for (let endpoint of this.endpoints) {
         const uri = `/api/endpoints/${endpoint.Id}/docker/containers/json?all=1`;
-        const endpointContainers = await this.fetch(uri, { headers })
-          .catch((e) => {
+        const endpointContainers = await this.fetch(uri, { headers }).catch(
+          (e) => {
             console.error(e);
-          });
+          }
+        );
 
         containers = containers.concat(endpointContainers);
       }

yarn.lock

@@ -2773,10 +2773,10 @@ core-js@^2.4.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
-core-js@^3.19.3:
-  version "3.20.2"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.2.tgz#46468d8601eafc8b266bd2dd6bf9dee622779581"
-  integrity sha512-nuqhq11DcOAbFBV4zCbKeGbKQsUDRqTX0oqx7AttUBuqe3h20ixsE039QHelbL6P4h+9kytVqyEtyZ6gsiwEYw==
+core-js@^3.21.1:
+  version "3.21.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94"
+  integrity sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==
 
 core-js@^3.6.5:
   version "3.15.2"