🔀 Merge pull request #388 from Lissy93/FIX/minor-issue-fixes

[FIX] Couple of minor issues
Fixes  #366 #377

.github/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 🐛 1.9.5 - Bug fixes and Minor Improvements [PR #388](https://github.com/Lissy93/dashy/pull/388)
+- Adds icon.horse to supported favicon APIs
+- Fixes tile move bug, Re: #366
+- Fixes save items without title bug, Re: #377
+
 ## ✨ 1.9.4 - Widget Support [PR #382](https://github.com/Lissy93/dashy/pull/382)
 - Adds support for dynamic content, through widgets
 - Adds 30+ pre-built widgets for general info and self-hosted services

docs/configuring.md

@@ -84,7 +84,7 @@ Tips:
 **`backgroundImg`** | `string` | _Optional_ | Path to an optional full-screen app background image. This can be either remote (http) or local (/). Note that this will slow down initial load
 **`enableFontAwesome`** | `boolean` | _Optional_ | Where `true` is enabled, if left blank font-awesome will be enabled only if required by 1 or more icons
 **`fontAwesomeKey`** | `string` | _Optional_ | If you have a font-awesome key, then you can use it here and make use of premium icons. It is a 10-digit alpha-numeric string from you're FA kit URL  (e.g. `13014ae648`)
-**`faviconApi`** | `enum` | _Optional_ | Only applicable if you are using favicons for item icons. Specifies which service to use to resolve favicons. Set to `local` to do this locally, without using an API. Services running locally will use this option always. Available options are: `local`, `faviconkit`, `google`, `clearbit`, `webmasterapi` and `allesedv`. Defaults to `faviconkit`. See [Icons](/docs/icons.md#favicons) for more info
+**`faviconApi`** | `enum` | _Optional_ | Only applicable if you are using favicons for item icons. Specifies which service to use to resolve favicons. Set to `local` to do this locally, without using an API. Services running locally will use this option always. Available options are: `local`, `faviconkit`, `iconhorse`, `google`, `clearbit`, `webmasterapi` and `allesedv`. Defaults to `faviconkit`. See [Icons](/docs/icons.md#favicons) for more info
 **`auth`** | `object` | _Optional_ | All settings relating to user authentication. See [`auth`](#appconfigauth-optional)
 **`layout`** | `enum` | _Optional_ | Layout for homepage, either `horizontal`, `vertical` or `auto`. Defaults to `auto`. This specifies the layout and direction of how sections are positioned on the home screen. This can also be modified and overridden from the UI.
 **`iconSize`** | `enum` | _Optional_ | The size of link items / icons. Can be either `small`, `medium,` or `large`. Defaults to `medium`. This can also be set directly from the UI.
@@ -99,6 +99,7 @@ Tips:
 **`enableMultiTasking`** | `boolean` | _Optional_ | If set to true, will keep apps open in the background when in the workspace view. Useful for quickly switching between multiple sites, and preserving their state, but comes at the cost of performance.
 **`workspaceLandingUrl`** | `string` | _Optional_ | The URL or an app, service or website to launch when the workspace view is opened, before another service has been launched
 **`allowConfigEdit`** | `boolean` | _Optional_ | Should prevent / allow the user to write configuration changes to the conf.yml from the UI. When set to `false`, the user can only apply changes locally using the config editor within the app, whereas if set to `true` then changes can be written to disk directly through the UI. Defaults to `true`. Note that if authentication is enabled, the user must be of type `admin` in order to apply changes globally.
+**`showSplashScreen`** | `boolean` | _Optional_ | If set to `true`, a loading screen will be shown. Defaults to `false`.
 **`enableErrorReporting`** | `boolean` | _Optional_ | Enable reporting of unexpected errors and crashes. This is off by default, and **no data will ever be captured unless you explicitly enable it**. Turning on error reporting helps previously unknown bugs get discovered and fixed. Dashy uses [Sentry](https://github.com/getsentry/sentry) for error reporting. Defaults to `false`.
 **`sentryDsn`** | `boolean` | _Optional_ | If you need to monitor errors in your instance, then you can use Sentry to collect and process bug reports. Sentry can be self-hosted, or used as SaaS, once your instance is setup, then all you need to do is pass in the DSN here, and enable error reporting. You can learn more on the [Sentry DSN Docs](https://docs.sentry.io/product/sentry-basics/dsn-explainer/). Note that this will only ever be used if `enableErrorReporting` is explicitly enabled.
 **`disableSmartSort`** | `boolean` | _Optional_ | For the most-used and last-used app sort functions to work, a basic open-count is stored in local storage. If you do not want this to happen, then disable smart sort here, but you wil no longer be able to use these sort options. Defaults to `false`.
@@ -162,7 +163,6 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)**
 **`hideSearch`** | `boolean` | _Optional_ | If set to `true`, the search bar will not be visible. Defaults to `false`
 **`hideSettings`** | `boolean` | _Optional_ | If set to `true`, the settings menu will not be visible. Defaults to `false`
 **`hideFooter`** | `boolean` | _Optional_ | If set to `true`, the footer will not be visible. Defaults to `false`
-**`hideSplashScreen`** | `boolean` | _Optional_ | If set to `true`, splash screen will not be visible while the app loads. Defaults to `true` (except on first load, when the loading screen is always shown)
 
 **[⬆️ Back to Top](#configuring)**
 

docs/icons.md

@@ -32,6 +32,7 @@ The default favicon API is  [allesedv.com](https://favicon.allesedv.com/), but y
 
 The following favicon APIs are supported:
 - `allesedv` - [allesedv.com](https://favicon.allesedv.com/) is a highly efficient IPv6-enabled service
+- `iconhorse` - [Icon.Horse](https://icon.horse/) returns quality icons for any site, with caching for speed and fallbacks for sites without an icon
 - `clearbit` - [Clearbit](https://clearbit.com/logo) returns high-quality square logos from mainstream websites
 - `faviconkit` - [faviconkit.com](https://faviconkit.com/) good quality icons and most sites supported (Note: down as of Nov '21)
 - `besticon` - [BestIcon](https://github.com/mat/besticon) fetches websites icons from manifest

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "license": "MIT",
   "main": "server",
   "author": "Alicia Sykes <alicia@omg.lol> (https://aliciasykes.com)",

src/App.vue

@@ -19,7 +19,6 @@ import Keys from '@/utils/StoreMutations';
 import {
   localStorageKeys,
   splashScreenTime,
-  visibleComponents as defaultVisibleComponents,
   language as defaultLanguage,
 } from '@/utils/defaults';
 
@@ -36,6 +35,12 @@ export default {
       isLoading: true, // Set to false after mount complete
     };
   },
+  watch: {
+    isEditMode(isEditMode) {
+      // When in edit mode, show confirmation dialog on page exit
+      window.onbeforeunload = isEditMode ? this.confirmExit : null;
+    },
+  },
   computed: {
     /* If the user has specified custom text for footer - get it */
     footerText() {
@@ -43,7 +48,7 @@ export default {
     },
     /* Determine if splash screen should be shown */
     shouldShowSplash() {
-      return (this.visibleComponents || defaultVisibleComponents).splashScreen;
+      return (this.appConfig.showSplashScreen);
     },
     config() {
       return this.$store.state.config;
@@ -77,7 +82,7 @@ export default {
     /* Hide splash screen, either after 2 seconds, or immediately based on user preference */
     hideSplash() {
       if (this.shouldShowSplash) {
-        setTimeout(() => { this.isLoading = false; }, splashScreenTime || 1500);
+        setTimeout(() => { this.isLoading = false; }, splashScreenTime || 1000);
       } else {
         this.isLoading = false;
       }
@@ -118,21 +123,27 @@ export default {
       this.$i18n.locale = language;
       document.getElementsByTagName('html')[0].setAttribute('lang', language);
     },
+    /* If placeholder element still visible, hide it */
     hideLoader() {
       const loader = document.getElementById('loader');
       if (loader) loader.style.display = 'none';
     },
+    /* Called when in edit mode and navigating away from page */
+    confirmExit(e) {
+      e.preventDefault();
+      return 'You may have unsaved edits. Are you sure you want to exit the page?';
+    },
   },
-  /* When component mounted, hide splash and initiate the injection of custom styles */
+  /* Basic initialization tasks on app load */
   mounted() {
-    this.applyLanguage();
-    this.hideSplash();
-    if (this.appConfig.customCss) {
+    this.applyLanguage(); // Apply users local language
+    this.hideSplash(); // Hide the splash screen, if visible
+    if (this.appConfig.customCss) { // Inject users custom CSS, if present
       const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, '');
       this.injectCustomStyles(cleanedCss);
-      this.hideLoader();
     }
-    welcomeMsg();
+    this.hideLoader(); // If initial placeholder still visible, hide it
+    welcomeMsg(); // Show message in console
   },
 };
 </script>

src/assets/locales/en.json

@@ -224,6 +224,9 @@
       "save-stage-btn": "Save",
       "cancel-stage-btn": "Cancel"
     },
+    "edit-item": {
+      "missing-title-err": "An item title is required"
+    },
     "edit-section": {
       "edit-section-title": "Edit Section",
       "add-section-title": "Add New Section",

src/components/InteractiveEditor/EditItem.vue

@@ -198,19 +198,26 @@ export default {
       // Convert form data back into section.item data structure
       const structured = {};
       this.formData.forEach((row) => { structured[row.name] = row.value; });
-      // Some attributes need a little extra formatting
-      const newItem = this.formatBeforeSave(structured);
-      if (this.isNew) { // Insert new item into data store
-        newItem.id = `temp_${newItem.title}`;
-        const payload = { newItem, targetSection: this.parentSectionTitle };
-        this.$store.commit(StoreKeys.INSERT_ITEM, payload);
-      } else { // Update existing item from form data, in the store
-        this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
+      if (!structured.title) { // Missing title, show error and don't proceed
+        this.$toasted.show(
+          this.$t('interactive-editor.edit-item.missing-title-err'),
+          { className: 'toast-error' },
+        );
+      } else {
+        // Some attributes need a little extra formatting
+        const newItem = this.formatBeforeSave(structured);
+        if (this.isNew) { // Insert new item into data store
+          newItem.id = `temp_${newItem.title}`;
+          const payload = { newItem, targetSection: this.parentSectionTitle };
+          this.$store.commit(StoreKeys.INSERT_ITEM, payload);
+        } else { // Update existing item from form data, in the store
+          this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
+        }
+        // If we're not already in edit mode, enable it now
+        this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
+        // Close edit menu
+        this.$emit('closeEditMenu');
       }
-      // If we're not already in edit mode, enable it now
-      this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
-      // Close edit menu
-      this.$emit('closeEditMenu');
     },
     /* Some fields require a bit of extra processing before they're saved */
     formatBeforeSave(item) {

src/store.js

@@ -205,6 +205,7 @@ const store = new Vuex.Store({
           });
         }
       });
+      config.sections = applyItemId(config.sections);
       state.config = config;
     },
     [SET_THEME](state, theme) {

src/utils/ConfigHelpers.js

@@ -48,8 +48,6 @@ export const componentVisibility = (appConfig) => {
       ? !usersChoice.hideSettings : visibleComponents.settings,
     footer: isThere(usersChoice.hideFooter)
       ? !usersChoice.hideFooter : visibleComponents.footer,
-    splashScreen: isThere(usersChoice.hideSplashScreen)
-      ? !usersChoice.hideSplashScreen : visibleComponents.splashScreen,
   };
 };
 

src/utils/ConfigSchema.json

@@ -147,6 +147,7 @@
             "local",
             "allesedv",
             "clearbit",
+            "iconhorse",
             "faviconkit",
             "duckduckgo",
             "yandex",
@@ -344,12 +345,6 @@
               "type": "boolean",
               "default": "false",
               "description": "If set to true, the page footer will be hidden"
-            },
-            "hideSplashScreen": {
-              "title": "Hide Splash Screen?",
-              "type": "boolean",
-              "default": "true",
-              "description": "If set to true, the loading / splash screen will not be shown"
             }
           }
         },
@@ -437,6 +432,12 @@
             }
           }
         },
+        "showSplashScreen": {
+          "title": "Show splash screen",
+          "type": "boolean",
+          "default": "false",
+          "description": "If set to true, a loading screen will be shown"
+        },
         "allowConfigEdit": {
           "title": "Allow Config Editing",
           "type": "boolean",

src/utils/defaults.js

@@ -185,6 +185,7 @@ module.exports = {
   faviconApiEndpoints: {
     allesedv: 'https://f1.allesedv.com/128/$URL',
     clearbit: 'https://logo.clearbit.com/$URL',
+    iconhorse: 'https://icon.horse/icon/$URL',
     faviconkit: 'https://api.faviconkit.com/$URL/64',
     duckduckgo: 'https://icons.duckduckgo.com/ip2/$URL.ico',
     yandex: 'https://favicon.yandex.net/favicon/$URL',