[REFACTOR] Spell check and reorganization

.github/CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
-## 📝 - Documentation Updates
+## ♻️ - Refactor [PR #110](https://github.com/Lissy93/dashy/pull/110)
+- Moves cloud sync dialog into the config menu, and removes icon on homepage
+- Fixes typo in Default theme name, Re #106
+- Spell checks readme
+- Updates the contributor CI action, that generates list of contributors + sponsors
+
+## 📝 - Documentation Updates [PR #108](https://github.com/Lissy93/dashy/pull/108)
 - Breaks many of the longer files into several more digestible articles
 - Writes repo pages including, Security, Code of Conduct, Legal, Updates license
 - Makes an automatically generated Credits page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "license": "MIT",
   "main": "server",
   "scripts": {

src/App.vue

@@ -13,6 +13,7 @@ import Footer from '@/components/PageStrcture/Footer.vue';
 import LoadingScreen from '@/components/PageStrcture/LoadingScreen.vue';
 import { componentVisibility } from '@/utils/ConfigHelpers';
 import ConfigAccumulator from '@/utils/ConfigAccumalator';
+import { welcomeMsg } from '@/utils/CoolConsole';
 import {
   localStorageKeys,
   splashScreenTime,
@@ -103,6 +104,7 @@ export default {
       const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, '');
       this.injectCustomStyles(cleanedCss);
     }
+    welcomeMsg();
   },
 };
 </script>

src/components/Configuration/ConfigContainer.vue

@@ -13,11 +13,11 @@
           <EditIcon class="button-icon"/>
           {{ $t('config.edit-config-button') }}
         </button>
-        <button class="config-button center" @click="() => navigateToTab(3)">
+        <button class="config-button center" @click="() => navigateToTab(4)">
           <CustomCssIcon class="button-icon"/>
           {{ $t('config.edit-css-button') }}
         </button>
-        <button class="config-button center" @click="openCloudSync()">
+        <button class="config-button center" @click="() => navigateToTab(3)">
           <CloudIcon class="button-icon"/>
           {{backupId ? $t('config.edit-cloud-sync-button') : $t('config.cloud-sync-button') }}
         </button>
@@ -67,6 +67,9 @@
     <TabItem :name="$t('config.edit-config-tab')">
       <JsonEditor :config="config" />
     </TabItem>
+    <TabItem :name="$t('cloud-sync.title')">
+      <CloudBackupRestore :config="config" />
+    </TabItem>
     <TabItem :name="$t('config.custom-css-tab')">
       <CustomCssEditor :config="config" />
     </TabItem>
@@ -83,6 +86,7 @@ import { localStorageKeys, modalNames } from '@/utils/defaults';
 import { getUsersLanguage } from '@/utils/ConfigHelpers';
 import JsonEditor from '@/components/Configuration/JsonEditor';
 import CustomCssEditor from '@/components/Configuration/CustomCss';
+import CloudBackupRestore from '@/components/Configuration/CloudBackupRestore';
 import RebuildApp from '@/components/Configuration/RebuildApp';
 import AppVersion from '@/components/Configuration/AppVersion';
 
@@ -119,6 +123,7 @@ export default {
   components: {
     JsonEditor,
     CustomCssEditor,
+    CloudBackupRestore,
     RebuildApp,
     AppVersion,
     DownloadIcon,
@@ -142,9 +147,6 @@ export default {
     openAboutModal() {
       this.$modal.show(modalNames.ABOUT_APP);
     },
-    openCloudSync() {
-      this.$modal.show(modalNames.CLOUD_BACKUP);
-    },
     openLanguageSwitchModal() {
       this.$modal.show(modalNames.LANG_SWITCHER);
     },

src/components/Settings/ConfigLauncher.vue

@@ -5,8 +5,6 @@
     <div class="config-buttons">
       <IconSpanner @click="showEditor()" tabindex="-2"
         v-tooltip="tooltip('Update configuration')" />
-      <IconCloud @click="showCloudModal()" tabindex="-2"
-        v-tooltip="tooltip('Backup / restore cloud config')" />
     </div>
 
     <!-- Modal containing all the configuration options -->
@@ -15,12 +13,6 @@
       <ConfigContainer :config="combineConfig()" />
     </modal>
 
-    <!-- Modal for cloud backup and restore options -->
-    <modal :name="modalNames.CLOUD_BACKUP" :resizable="true" width="65%" height="60%"
-      @closed="$emit('modalChanged', false)" classes="dashy-modal">
-      <CloudBackupRestore :config="combineConfig()" />
-    </modal>
-
     <!-- Modal for manually changing locale -->
     <modal :name="modalNames.LANG_SWITCHER" classes="dashy-modal"
       :resizable="true" width="30%" height="25%">
@@ -33,9 +25,7 @@
 <script>
 
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
-import IconCloud from '@/assets/interface-icons/cloud-backup-restore.svg';
 import ConfigContainer from '@/components/Configuration/ConfigContainer';
-import CloudBackupRestore from '@/components/Configuration/CloudBackupRestore';
 import LanguageSwitcher from '@/components/Settings/LanguageSwitcher';
 import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';
 
@@ -48,9 +38,7 @@ export default {
   },
   components: {
     IconSpanner,
-    IconCloud,
     ConfigContainer,
-    CloudBackupRestore,
     LanguageSwitcher,
   },
   props: {
@@ -64,10 +52,6 @@ export default {
       this.$modal.show(modalNames.CONF_EDITOR);
       this.$emit('modalChanged', true);
     },
-    showCloudModal: function show() {
-      this.$modal.show(modalNames.CLOUD_BACKUP);
-      this.$emit('modalChanged', true);
-    },
     combineConfig() {
       const conf = {};
       conf[topLevelConfKeys.APP_CONFIG] = this.appConfig;

src/components/Settings/ThemeSelector.vue

@@ -104,9 +104,9 @@ export default {
     /* Updates theme. Checks if the new theme is local or external,
     and calls appropirate updating function. Updates local storage */
     updateTheme(newTheme) {
-      if (newTheme === 'Deafault') {
+      if (newTheme === 'Default') {
         this.resetToDefault();
-        this.themeHelper.theme = 'Deafault';
+        this.themeHelper.theme = 'Default';
       } else if (this.isThemeLocal(newTheme)) {
         this.ApplyLocalTheme(newTheme);
       } else {

src/utils/CoolConsole.js

@@ -0,0 +1,14 @@
+/* eslint no-console: ["error", { allow: ["log"] }] */
+
+export const welcomeMsg = () => {
+  const v = process.env.VUE_APP_VERSION ? `V${process.env.VUE_APP_VERSION}` : '';
+  console.log(`%cDashy  ${v} 🚀`, 'color:#00af87; background:#0b1021; font-size:36px; padding: 0.5rem 0.5rem 0; margin: 1rem auto; font-family: Rockwell; border: 2px solid #00af87; border-radius: 4px;font-weight: bold; text-shadow: 1px 1px 1px #00af87bf;');
+};
+
+export const warningMsg = () => {
+  console.log('%c⚠️ Error ⚠️', "background:#21bbca; color:#0b1021; font-size:20px; padding:0.25rem 0.5rem; margin: 1rem auto 0.25rem; font-family: 'Trebuchet MS', Helvetica; border: 2px solid yellow; border-radius: 4px; font-weight: bold;");
+};
+
+export const raiseBug = () => {
+  console.log('%c🐛If you have found a bug, raise an issue on GitHub, at:\nhttps://git.io/JnqPR', "color:#dddd10; font-size: 14px; font-family: 'Trebuchet MS', Helvetica;");
+};

src/utils/ErrorHandler.js

@@ -1,11 +1,15 @@
 /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
 
+import { warningMsg, raiseBug } from '@/utils/CoolConsole';
+
 /**
  * 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) {
+  warningMsg();
   console.warn(msg);
+  raiseBug();
 };
 
 export default ErrorHandler;

src/views/Home.vue

@@ -157,7 +157,7 @@ export default {
           }
         }
       }
-      availibleThemes.Deafault = '#';
+      availibleThemes.Default = '#';
       return availibleThemes;
     },
     /* Checks if any of the icons are Font Awesome glyphs */