Add a get started link when no configuration is found

2 files changed, 52 insertions, 8 deletions

diff --git a/src/components/GetStarted.vue b/src/components/GetStarted.vue
new file mode 100644
index 0000000..dcabc02
--- /dev/null
+++ b/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>
diff --git a/src/components/services/Portainer.vue b/src/components/services/Portainer.vue
index 176d92e..c7e9962 100644
--- a/src/components/services/Portainer.vue
+++ b/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);
       }