From 3aba7f23da19727c1e62754ea5f30d28a796eedb Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 4 May 2021 14:49:25 +0100
Subject: [PATCH] Adds additional safeguards for edge cases, and improves theme
 coverage

---
 README.md                                     | 10 ++++
 src/assets/interface-icons/broken-icon.svg    | 50 +++++++++++++++++++
 src/components/LinkItems/IframeModal.vue      | 14 +++++-
 src/components/LinkItems/Item.vue             |  8 +--
 src/components/LinkItems/ItemIcon.vue         | 32 +++++++++++-
 .../Settings/KeyboardShortcutInfo.vue         | 16 +++---
 src/components/Settings/SettingsContainer.vue |  1 +
 src/styles/color-palette.scss                 |  3 ++
 src/styles/color-themes.scss                  |  5 ++
 src/styles/media-queries.scss                 |  5 ++
 src/utils/ErrorHandler.js                     | 11 ++++
 src/views/Home.vue                            | 10 ++++
 12 files changed, 149 insertions(+), 16 deletions(-)
 create mode 100644 src/assets/interface-icons/broken-icon.svg
 create mode 100644 src/utils/ErrorHandler.js

diff --git a/README.md b/README.md
index c845d0a7..a6cfb0c0 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,12 @@
 - Many options for icons, including full Font-Awesome support and the ability to auto-fetch icon from URLs favicon
 - Plus lots more...
 
+## Live Demo
+
+- [Demo 1](https://dashy-demo-1.as93.net)
+- [Demo 2](https://dashy-demo-2.as93.net)
+- [Demo 3](https://dashy-demo-3.as93.net)
+
 ---
 
 ## Running the App 🏃‍♂️
@@ -140,6 +146,10 @@ appConfig:
 - [ ] Add support for custom widgets
 - [ ] Convert JavaScript to TypeScript
 
+### Alternatives 🙌
+
+There are a few self-hosted web apps, that serve a similar purpose to Dashy. Including, but not limited to: [HomeDash2](https://lamarios.github.io/Homedash2), [Homer](https://github.com/bastienwirtz/homer), [Organizr](https://organizr.app/) and  [Heimdall](https://github.com/linuxserver/Heimdall).
+
 ### Credits 🏆
 
 The app makes use of the following components, kudos to their respective authors
diff --git a/src/assets/interface-icons/broken-icon.svg b/src/assets/interface-icons/broken-icon.svg
new file mode 100644
index 00000000..d2b5d391
--- /dev/null
+++ b/src/assets/interface-icons/broken-icon.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			
+				<rect x="96.397" y="284.966" transform="matrix(-0.9401 0.341 -0.341 -0.9401 320.6888 545.5591)" width="31.998" height="31.998"/>
+			<polygon points="271.552,301.072 193.696,254.352 152.08,269.504 163.024,299.568 190.304,289.648 272.448,338.928 
+				370.048,273.856 480,315.088 480,480 32,480 32,347.2 72.8,332.352 61.872,302.304 0,324.8 0,512 512,512 512,292.912 
+				365.952,238.144 			"/>
+			<polygon points="0,0 0,278.848 66.576,254.624 55.648,224.56 32,233.152 32,32 480,32 480,200.912 365.952,158.144 
+				271.552,221.072 193.696,174.352 145.856,191.744 156.8,221.808 190.304,209.648 272.448,258.928 370.048,193.856 512,247.088 
+				512,0 			"/>
+			<rect x="90.237" y="207.181" transform="matrix(-0.3419 -0.9397 0.9397 -0.3419 -67.18 399.3166)" width="31.984" height="32"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/components/LinkItems/IframeModal.vue b/src/components/LinkItems/IframeModal.vue
index ccd5e9d3..2637b868 100644
--- a/src/components/LinkItems/IframeModal.vue
+++ b/src/components/LinkItems/IframeModal.vue
@@ -2,7 +2,8 @@
   <modal :name="name" :resizable="true" width="80%" height="80%" @closed="$emit('closed')">
     <div slot="top-right" @click="hide()">Close</div>
     <a @click="hide()" class="close-button" title="Close">x</a>
-    <iframe :src="url" @keydown.esc="close" class="frame"/>
+    <iframe v-if="url" :src="url" @keydown.esc="close" class="frame"/>
+    <div v-else class="no-url">No URL Specified</div>
   </modal>
 </template>
 
@@ -35,6 +36,16 @@ export default {
   border: none;
 }
 
+.no-url {
+  margin: 4rem auto;
+  width: fit-content;
+  font-size: 2rem;
+  padding: 0.5rem;
+  border: 1px dashed #ff0000;
+  border-radius: 3px;
+  background: #f4f2f2;
+}
+
 .close-button {
   position: absolute;
   right: 0;
@@ -46,7 +57,6 @@ export default {
   border-left: 1px solid var(--primary);
   border-bottom: 1px solid var(--primary);
   cursor: pointer;
-
   &:hover {
     background: var(--background);
     color: var(--primary);
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 1b822b87..b0b8ff34 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -96,7 +96,7 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 
 .item {
   flex-grow: 1;
@@ -200,7 +200,7 @@ export default {
     justify-content: flex-end;
     align-items: center;
     height: 2rem;
-    img {
+    div img, div svg.missing-image {
       width: 2rem;
     }
     .tile-title {
@@ -217,8 +217,8 @@ export default {
     flex-direction: column;
     align-items: center;
     height: auto;
-    img {
-      width: 2rem;
+    div img, div svg.missing-image {
+      width: 2.5rem;
       margin-bottom: 0.25rem;
     }
     .tile-title {
diff --git a/src/components/LinkItems/ItemIcon.vue b/src/components/LinkItems/ItemIcon.vue
index 3b94e160..ada43964 100644
--- a/src/components/LinkItems/ItemIcon.vue
+++ b/src/components/LinkItems/ItemIcon.vue
@@ -1,9 +1,16 @@
 <template>
-  <i v-if="iconType === 'font-awesome'" :class="`${icon} ${size}`" ></i>
-  <img v-else-if="icon" :src="iconPath" :class="`tile-icon ${size}`" />
+  <div>
+    <i v-if="iconType === 'font-awesome'" :class="`${icon} ${size}`" ></i>
+    <img v-else-if="icon" :src="iconPath" @error="imageNotFound"
+      :class="`tile-icon ${size} ${broken ? 'broken' : ''}`"
+    />
+    <BrokenImage v-if="broken" class="missing-image" />
+  </div>
 </template>
 
 <script>
+import BrokenImage from '@/assets/interface-icons/broken-icon.svg';
+import ErrorHandler from '@/utils/ErrorHandler';
 
 export default {
   name: 'Icon',
@@ -12,6 +19,9 @@ export default {
     url: String, // Used for fetching the favicon
     size: String, // Either small, medium or large
   },
+  components: {
+    BrokenImage,
+  },
   computed: {
     iconType: function iconType() {
       return this.determineImageType(this.icon);
@@ -20,6 +30,11 @@ export default {
       return this.getIconPath(this.icon, this.url);
     },
   },
+  data() {
+    return {
+      broken: false,
+    };
+  },
   methods: {
     /* Check if a string is in a URL format. Used to identify tile icon source */
     isUrl(str) {
@@ -72,6 +87,11 @@ export default {
       else imgType = 'none';
       return imgType;
     },
+    /* Called when the path to the image cannot be resolved */
+    imageNotFound() {
+      this.broken = true;
+      ErrorHandler(`The path to '${this.icon}' could not be resolved`);
+    },
   },
 };
 </script>
@@ -80,6 +100,7 @@ export default {
   .tile-icon {
       width: 60px;
       filter: var(--item-icon-transform);
+      &.broken { display: none; }
   }
   i.fas, i.fab, i.far, i.fal, i.fad {
     font-size: 2rem;
@@ -99,4 +120,11 @@ export default {
       fill: currentColor;
     }
   }
+
+  .missing-image {
+    width: 3.5rem;
+    path {
+      fill: currentColor;
+    }
+  }
 </style>
diff --git a/src/components/Settings/KeyboardShortcutInfo.vue b/src/components/Settings/KeyboardShortcutInfo.vue
index 1c4f2294..87338106 100644
--- a/src/components/Settings/KeyboardShortcutInfo.vue
+++ b/src/components/Settings/KeyboardShortcutInfo.vue
@@ -76,12 +76,12 @@ export default {
   padding: 0.1em 0.3em;
   z-index: 10;
   border-radius: 12px;
-  border: 1px solid var(--background-darker);
+  border: 1px solid var(--welcome-popup-background);
   -webkit-box-shadow: 2px 1px 5px #130f23;
   box-shadow: 2px 1px 5px #130f23;
-  border: 1px solid var(--primary);
-  color: var(--primary);
-  background: var(--background-darker);
+  border: 1px solid var(--welcome-popup-text-color);
+  color: var(--welcome-popup-text-color);
+  background: var(--welcome-popup-background);
   cursor: default;
   opacity: 0.94;
   @include phone {
@@ -91,9 +91,9 @@ export default {
     position: absolute;
     top: -35px;
     left: 20px;
-    border: 1px solid var(--primary);
-    color: var(--primary);
-    background: var(--background-darker);
+    border: 1px solid var(--welcome-popup-text-color);
+    color: var(--welcome-popup-text-color);
+    background: var(--welcome-popup-background);
     padding: 4px;
     border-radius: var(--curve-factor);
   }
@@ -108,7 +108,7 @@ export default {
     border: 1px solid transparent;
     cursor: pointer;
     &:hover {
-      border: 1px solid var(--primary);
+      border: 1px solid var(--welcome-popup-text-color);
       opacity: var(--dimming-factor);
     }
   }
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 2b846a01..32e1b6cc 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -75,6 +75,7 @@ export default {
     align-items: center;
     align-items: stretch;
     background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
+    box-shadow: var(--settings-container-shadow);
   }
   .options-container {
     display: flex;
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 3107583d..4f6f5424 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -29,6 +29,7 @@
   --item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
   --item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
   --item-group-shadow: var(--item-shadow);
+  --settings-container-shadow: none;
 
   /* Specific components, using variables allows them to be overridden individually */
   --heading-text-color: var(--primary);
@@ -48,4 +49,6 @@
   --search-field-background: var(--background);
   --footer-text-color: var(--medium-grey);
   --footer-text-color-link:  var(--primary);
+  --welcome-popup-background: var(--background-darker);
+  --welcome-popup-text-color: var(--primary);
 }
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 5db8fa4f..46f3fe6a 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -144,6 +144,9 @@ html[data-theme='material'] {
   --item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
   --item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
   --item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
+  --settings-container-shadow: 0 1px 3px #0000005e, 0 1px 2px #00000085;
+  --welcome-popup-background: #01579b;
+  --welcome-popup-text-color: #ffffff;
 }
 
 html[data-theme='material-dark'] {
@@ -171,6 +174,8 @@ html[data-theme='material-dark'] {
   --item-hover-shadow: 4px 4px 3px #00000082, 0 1px 10px #00000040;
   --item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
   --item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
+  --welcome-popup-background: #131a1f;
+  --welcome-popup-text-color: var(--primary);
 }
 
 html[data-theme='colorful'] {
diff --git a/src/styles/media-queries.scss b/src/styles/media-queries.scss
index 91461af7..00ffc47e 100644
--- a/src/styles/media-queries.scss
+++ b/src/styles/media-queries.scss
@@ -53,3 +53,8 @@ $extra-large: 2800px;
     @content;
   }
 }
+@mixin big-screen-up {
+  @media (min-width: #{$extra-large}) {
+    @content;
+  }
+}
diff --git a/src/utils/ErrorHandler.js b/src/utils/ErrorHandler.js
new file mode 100644
index 00000000..15e27769
--- /dev/null
+++ b/src/utils/ErrorHandler.js
@@ -0,0 +1,11 @@
+/* eslint no-console: ["error", { allow: ["warn", "error"] }] */
+
+/**
+ * Function called when an error happens
+ * If you wish to use an error logging service, put code for it here
+ */
+const ErrorHandler = function handler(msg) {
+  console.warn(msg);
+};
+
+export default ErrorHandler;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ce8647a1..98cc05d2 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -23,6 +23,7 @@
         :items="filterTiles(section.items)"
          @itemClicked="finishedSearching()"
          :itemSize="itemSizeBound"
+         :class="(filterTiles(section.items).length === 0 && searchValue) ? 'no-results' : ''"
       />
     </div>
     <div v-else class="no-data">No Data Found Yet</div>
@@ -81,12 +82,14 @@ export default {
     },
     /* Extracts the site name from domain, used for the searching functionality */
     getDomainFromUrl(url) {
+      if (!url) return '';
       const urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d.-]+)\.(?:[a-z.]{2,10})(?:[/\w.-]*)*/;
       const domainPattern = url.match(urlPattern);
       return domainPattern ? domainPattern[1] : '';
     },
     /* Returns only the tiles that match the users search query */
     filterTiles(allTiles) {
+      if (!allTiles) return [];
       return allTiles.filter((tile) => {
         const {
           title, description, provider, url,
@@ -181,6 +184,7 @@ export default {
     flex-direction: column;
   }
   &.orientation-vertical {
+    max-width: 100%;
     @include tablet-up {
       display: flex;
       flex-direction: row;
@@ -203,6 +207,12 @@ export default {
   @include big-screen {
     grid-template-columns: repeat(4, 1fr);
   }
+  @include big-screen-up {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  /* Hide when search term returns nothing */
+  .no-results { display: none; }
 }
 
 .no-data {