From b10afe3c98d831f957d9a4071f73897684a1b754 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Sat, 28 Oct 2023 16:00:55 -0700
Subject: [PATCH] fix: restore QMK icon (#1319)

- the build process wasn't able to resolve the css path for the build
   icon. The quickest fix was to just move the icon file to public,
   this ensures it's always copied when making the dist.
 - fixed some warnings in App.vue about ordering of tags
 - moved the relevant CSS in App.vue
 - removed unused file
 - updated caniuse db
---
 {assets => public}/qmk_icon_36.png  | Bin
 {assets => public}/qmk_icon_512.png | Bin
 src/App.vue                         |  57 ++++++++++++++++------------
 src/scss/status-bar.scss            |   8 ----
 vue.config.js.old                   |  17 ---------
 yarn.lock                           |   6 +--
 6 files changed, 36 insertions(+), 52 deletions(-)
 rename {assets => public}/qmk_icon_36.png (100%)
 rename {assets => public}/qmk_icon_512.png (100%)
 delete mode 100644 vue.config.js.old

diff --git a/assets/qmk_icon_36.png b/public/qmk_icon_36.png
similarity index 100%
rename from assets/qmk_icon_36.png
rename to public/qmk_icon_36.png
diff --git a/assets/qmk_icon_512.png b/public/qmk_icon_512.png
similarity index 100%
rename from assets/qmk_icon_512.png
rename to public/qmk_icon_512.png
diff --git a/src/App.vue b/src/App.vue
index 95f0daa95c..1656be6f80 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
         <p class="random-potato">{{ potatoFact }}</p>
       </header>
       <router-view />
-      <spinner :isVisible="showSpinner" :status="spinnerMsg" />
+      <spinner :is-visible="showSpinner" :status="spinnerMsg" />
       <InfoBar :msg="message" />
     </div>
     <slideout-panel></slideout-panel>
@@ -18,8 +18,8 @@
     <div
       class="help"
       :class="helpClasses"
-      @click="toggleTutorial"
       :title="$t('help.label')"
+      @click="toggleTutorial"
       @mouseenter="
         setMessage($t('help.label'));
         hover = true;
@@ -36,9 +36,9 @@
         size="3x"
       />
       <img
+        v-show="snowflakes && !tutorialEnabled"
         class="santa-hat"
         src="../assets/Santa_hat.svg"
-        v-show="snowflakes && !tutorialEnabled"
         alt="Santa Hat by Theresa Knott [Public domain], via Wikimedia Commons"
       />
       <font-awesome-icon
@@ -48,9 +48,9 @@
         size="3x"
       />
       <img
+        v-show="snowflakes && tutorialEnabled"
         class="jinglebell"
         src="../assets/jinglebell.svg"
-        v-show="snowflakes && tutorialEnabled"
         alt="Jingle Bell SVG Icon made from Icon Fonts is licensed by CC BY 3.0"
       />
     </div>
@@ -97,6 +97,26 @@ export default {
       hover: false
     };
   },
+  computed: {
+    ...mapGetters('keymap', ['isDirty']),
+    ...mapState([
+      'showSpinner',
+      'spinnerMsg',
+      'message',
+      'tutorialEnabled',
+      'snowflakes'
+    ]),
+    showInfoBar() {
+      return this.message !== '';
+    },
+    helpClasses() {
+      var classes = [];
+      if (this.hover) {
+        classes.push('faa-tada', 'animated-hover');
+      }
+      return classes.join(' ');
+    }
+  },
   async beforeMount() {
     await this.appLoad();
     this.randomPotatoFact();
@@ -122,26 +142,6 @@ export default {
     // remove event listener
     window.removeEventListener('beforeunload', this.showConfirmationPrompt);
   },
-  computed: {
-    ...mapGetters('keymap', ['isDirty']),
-    ...mapState([
-      'showSpinner',
-      'spinnerMsg',
-      'message',
-      'tutorialEnabled',
-      'snowflakes'
-    ]),
-    showInfoBar() {
-      return this.message !== '';
-    },
-    helpClasses() {
-      var classes = [];
-      if (this.hover) {
-        classes.push('faa-tada', 'animated-hover');
-      }
-      return classes.join(' ');
-    }
-  },
   methods: {
     ...mapMutations([
       'setShowSpinner',
@@ -236,6 +236,15 @@ export default {
   transform: rotate(-9deg);
 }
 
+.qmk-logo {
+  grid-column: qmk-logo;
+  background-image: url('/qmk_icon_36.png');
+  width: 36px;
+  height: 36px;
+  transform: scale(0.777777);
+  margin-top: 2px;
+}
+
 /* TADA - from https://l-lin.github.io/font-awesome-animation/ */
 @keyframes tada {
   0% {
diff --git a/src/scss/status-bar.scss b/src/scss/status-bar.scss
index 18b7b60f46..492382c54b 100644
--- a/src/scss/status-bar.scss
+++ b/src/scss/status-bar.scss
@@ -18,14 +18,6 @@
   grid-template: 1fr / [qmk-logo] auto [qmk-app-name] auto [api-version];
 }
 
-.qmk-logo {
-  grid-column: qmk-logo;
-  background-image: url('../assets/qmk_icon_36.png');
-  width: 36px;
-  height: 36px;
-  transform: scale(0.777777);
-  margin-top: 2px;
-}
 .qmk-app-name {
   grid-column: qmk-app-name;
   color: #fff;
diff --git a/vue.config.js.old b/vue.config.js.old
deleted file mode 100644
index 4c2d4ae15e..0000000000
--- a/vue.config.js.old
+++ /dev/null
@@ -1,17 +0,0 @@
-const webpack = require('webpack');
-const path = require('path');
-const fs = require('fs');
-
-global.appRoot = path.resolve(__dirname);
-module.exports = {
-  publicPath: process.env.NODE_ENV === 'production' ? '.' : '/',
-  configureWebpack: (config) => {},
-  chainWebpack: (config) => {
-    config.module
-      .rule('translations')
-      .test(/\.csv$/)
-      .use(path.resolve('scripts/i18n/loader.js'))
-      .loader(path.resolve('scripts/i18n/loader.js'))
-      .end();
-  }
-};
diff --git a/yarn.lock b/yarn.lock
index bb043e4dd9..2fc5d8b460 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2873,9 +2873,9 @@ camelcase@^6.0.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001297:
-  version "1.0.30001383"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001383.tgz"
-  integrity sha512-swMpEoTp5vDoGBZsYZX7L7nXHe6dsHxi9o6/LKf/f0LukVtnrxly5GVb/fWdCDTqi/yw6Km6tiJ0pmBacm0gbg==
+  version "1.0.30001555"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001555.tgz"
+  integrity sha512-NzbUFKUnJ3DTcq6YyZB6+qqhfD112uR3uoEnkmfzm2wVzUNsFkU7AwBjKQ654Sp5cau0JxhFyRSn/tQZ+XfygA==
 
 caseless@~0.12.0:
   version "0.12.0"