From 0a80ffcac0850d4885c1d5d86ca1afe81c607019 Mon Sep 17 00:00:00 2001
From: Nerd <imalonelynerd@gmail.com>
Date: Sat, 7 Oct 2023 00:44:13 +0200
Subject: [PATCH] 2023.10.07.1

---
 .gitignore                                |   3 +-
 package-lock.json                         |  46 +++++++++++-----------
 package.json                              |   2 +-
 public/flags/{homo.png => pride.png}      | Bin
 public/flags/test.txt                     |  35 ----------------
 src/App.vue                               |  25 +-----------
 src/assets/base.css                       |   2 +-
 src/assets/js/fetchResult.js              |  35 ++++++++--------
 src/assets/json/flagsMatches.json         |   8 ++--
 src/components/Creator/Dummy/HelpPage.vue |  12 ++----
 src/components/Hero/HeroTitle.vue         |   4 ++
 src/components/Hero/PronounceCompat.vue   |   9 +----
 src/components/Transition/ErrorPage.vue   |   6 +--
 src/components/Transition/LoadingPage.vue |   6 +--
 src/router/index.js                       |  29 +++-----------
 src/views/HeroCreator.vue                 |   3 +-
 src/views/HeroPage.vue                    |  12 +++++-
 src/views/HeroPageWrapper.vue             |  17 ++++++++
 src/views/HomePage.vue                    |   4 +-
 19 files changed, 101 insertions(+), 157 deletions(-)
 rename public/flags/{homo.png => pride.png} (100%)
 delete mode 100644 public/flags/test.txt
 create mode 100644 src/views/HeroPageWrapper.vue

diff --git a/.gitignore b/.gitignore
index aa7135c..845315d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,5 +27,4 @@ coverage
 *.sln
 *.sw?
 
-.vite
-production.sh
\ No newline at end of file
+.vite
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index f3ae46a..43b737c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "prettyheroes",
-  "version": "0.0.0",
+  "version": "fang",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "prettyheroes",
-      "version": "0.0.0",
+      "version": "fang",
       "dependencies": {
         "dompurify": "^3.0.6",
         "js-yaml": "^4.1.0",
@@ -22,9 +22,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.22.16",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.16.tgz",
-      "integrity": "sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
+      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -390,9 +390,9 @@
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.3.4.tgz",
-      "integrity": "sha512-ciXNIHKPriERBisHFBvnTbfKa6r9SAesOYXeGDzgegcvy9Q4xdScSHAmKbNT0M3O0S9LKhIf5/G+UYG4NnnzYw==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.4.0.tgz",
+      "integrity": "sha512-xdguqb+VUwiRpSg+nsc2HtbAUSGak25DXYvpQQi4RVU1Xq1uworyoH/md9Rfd8zMmPR/pSghr309QNcftUVseg==",
       "dev": true,
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
@@ -592,9 +592,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.3",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
-      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+      "version": "0.30.4",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.4.tgz",
+      "integrity": "sha512-Q/TKtsC5BPm0kGqgBIF9oXAs/xEf2vRKiIB4wCRQTJOQIByZ1d+NnUOotvJOvNpi5RNIgVOMC3pOuaP1ZTDlVg==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -603,9 +603,9 @@
       }
     },
     "node_modules/marked": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-9.0.3.tgz",
-      "integrity": "sha512-pI/k4nzBG1PEq1J3XFEHxVvjicfjl8rgaMaqclouGSMPhk7Q3Ejb2ZRxx/ZQOcQ1909HzVoWCFYq6oLgtL4BpQ==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-9.1.0.tgz",
+      "integrity": "sha512-VZjm0PM5DMv7WodqOUps3g6Q7dmxs9YGiFUZ7a2majzQTTCgX+6S6NAJHPvOhgFBzYz8s4QZKWWMfZKFmsfOgA==",
       "bin": {
         "marked": "bin/marked.js"
       },
@@ -636,9 +636,9 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/postcss": {
-      "version": "8.4.30",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
-      "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -663,9 +663,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.29.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.2.tgz",
-      "integrity": "sha512-CJouHoZ27v6siztc21eEQGo0kIcE5D1gVPA571ez0mMYb25LGYGKnVNXpEj5MGlepmDWGXNjDB5q7uNiPHC11A==",
+      "version": "3.29.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
+      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -704,9 +704,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.4.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
-      "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
+      "integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
diff --git a/package.json b/package.json
index 9d2af7d..a708e05 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prettyheroes",
-  "version": "0.0.1",
+  "version": "fang",
   "private": true,
   "scripts": {
     "dev": "vite",
diff --git a/public/flags/homo.png b/public/flags/pride.png
similarity index 100%
rename from public/flags/homo.png
rename to public/flags/pride.png
diff --git a/public/flags/test.txt b/public/flags/test.txt
deleted file mode 100644
index cec1661..0000000
--- a/public/flags/test.txt
+++ /dev/null
@@ -1,35 +0,0 @@
-abro.png
-ace.png
-agender.png
-akio.png
-aroace.png
-aro.png
-auto.png
-bigender.png
-bi.png
-biromantic.png
-demiboy.png
-demifae.png
-demifaun.png
-demigirl.png
-demi.png
-fae.png
-faun.png
-fluid.png
-gay.png
-grey.png
-homo.png
-inter.png
-lesbian.png
-nb.png
-neutrois.png
-omni.png
-omniromantical.png
-pan.png
-poly.png
-queer.png
-test.txt
-toomuch.png
-transfem.png
-transmasc.png
-trans.png
diff --git a/src/App.vue b/src/App.vue
index 03e36ff..ccbcd97 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,31 +1,8 @@
 <script setup>
-import HomePage from "@/views/HomePage.vue";
-import HeroCreator from "@/views/HeroCreator.vue";
-import HeroPage from "@/views/HeroPage.vue";
-import LoadingPage from "@/components/Transition/LoadingPage.vue";
-
-function currentPage(route) {
-  switch (route.path) {
-    case '/':
-      return "HOME";
-    case '/creator':
-      return "CREATOR";
-    default:
-      return "HERO";
-  }
-}
-
 </script>
 
 <template>
-  <HomePage v-if="currentPage($route) === 'HOME'"/>
-  <HeroCreator v-if="currentPage($route) === 'CREATOR'"/>
-  <Suspense v-if="currentPage($route) === 'HERO'">
-    <template #fallback>
-      <LoadingPage/>
-    </template>
-    <HeroPage/>
-  </Suspense>
+  <router-view></router-view>
 </template>
 
 <style scoped>
diff --git a/src/assets/base.css b/src/assets/base.css
index 4f9a2e7..af1af05 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -14,7 +14,7 @@
 }
 
 @media screen and (orientation: portrait) {
-    :root{
+    :root {
         --col: var(--wi);
         --al: #353056;
     }
diff --git a/src/assets/js/fetchResult.js b/src/assets/js/fetchResult.js
index 801a973..71346c6 100644
--- a/src/assets/js/fetchResult.js
+++ b/src/assets/js/fetchResult.js
@@ -1,6 +1,7 @@
 import {load} from "js-yaml";
 import {parse} from "smol-toml";
 import {refactorToml, refactorYaml} from "@/assets/js/checkFile";
+import homeInfo from "@/assets/json/homeInfo.json"
 
 export async function fetchWebsite(url) {
     let res = null;
@@ -15,7 +16,7 @@ export async function fetchWebsite(url) {
     return res.text();
 }
 
-export function loadAsToml(fetchedContent) {
+export function loadAsToml(fetchedContent, noColor) {
     let loadedContent = null;
     try {
         loadedContent = parse(fetchedContent);
@@ -25,29 +26,31 @@ export function loadAsToml(fetchedContent) {
 
     refactorToml(loadedContent);
 
-    document.querySelector('head title').textContent = `${loadedContent.title.title} - PrettyHeroes`;
+    document.querySelector('head title').textContent = `${loadedContent.title.title} - ${homeInfo.appName}`;
     document.querySelector("link[rel~='icon']").href = loadedContent.title.img;
     document.querySelector("meta[name='description']").content = loadedContent.title.catchphrase;
     document.querySelector("meta[name='og:title']").content = loadedContent.title.title;
     document.querySelector("meta[name='og:description']").content = loadedContent.title.catchphrase;
 
-    let params = {
-        '--cbg': loadedContent.colors.background,
-        '--cwi': loadedContent.colors.widget,
-        '--clk': loadedContent.colors.link,
-        '--cho': loadedContent.colors.hover,
-        '--ctt': loadedContent.colors.title,
-        '--ctxt': loadedContent.colors.text
-    }
-    for (let elem in params) {
-        if (params[elem] !== undefined) {
-            document.documentElement.style.setProperty(elem, params[elem]);
+    if (!noColor) {
+        let params = {
+            '--cbg': loadedContent.colors.background,
+            '--cwi': loadedContent.colors.widget,
+            '--clk': loadedContent.colors.link,
+            '--cho': loadedContent.colors.hover,
+            '--ctt': loadedContent.colors.title,
+            '--ctxt': loadedContent.colors.text
+        }
+        for (let elem in params) {
+            if (params[elem] !== undefined) {
+                document.documentElement.style.setProperty(elem, params[elem]);
+            }
         }
     }
     return loadedContent;
 }
 
-export function loadAsYaml(fetchedContent) {
+export function loadAsYaml(fetchedContent, noColor) {
     let loadedContent = null;
     try {
         loadedContent = load(fetchedContent);
@@ -91,12 +94,12 @@ export function loadAsYaml(fetchedContent) {
             url: loadedContent.urls[elem]
         })
     }
-    document.querySelector('head title').textContent = `${loadedContent.title} - PrettyHeroes`;
+    document.querySelector('head title').textContent = `${loadedContent.title} - ${homeInfo.appName}`;
     document.querySelector("head link[rel~='icon']").href = loadedContent.icon;
     document.querySelector("head meta[name='description']").content = "From Pronounce";
     document.querySelector("head meta[name='og:title']").content = loadedContent.title;
     document.querySelector("head meta[name='og:description']").content = "From Pronounce";
-    if (loadedContent.colors === undefined) {
+    if (loadedContent.colors === undefined || noColor) {
         return result;
     }
     let params = {
diff --git a/src/assets/json/flagsMatches.json b/src/assets/json/flagsMatches.json
index 7da1b64..668b78f 100644
--- a/src/assets/json/flagsMatches.json
+++ b/src/assets/json/flagsMatches.json
@@ -79,9 +79,9 @@
     "img": "grey.png",
     "name": "Greysexual"
   },
-  "homo": {
-    "img": "homo.png",
-    "name": "Homosexual"
+  "pride": {
+    "img": "pride.png",
+    "name": "LGBTQIA+"
   },
   "inter": {
     "img": "inter.png",
@@ -123,7 +123,7 @@
     "img": "transfem.png",
     "name": "Transfeminine"
   },
-  "transmac": {
+  "transmasc": {
     "img": "transmasc.png",
     "name": "Transmasculine"
   },
diff --git a/src/components/Creator/Dummy/HelpPage.vue b/src/components/Creator/Dummy/HelpPage.vue
index 1aa0763..1398325 100644
--- a/src/components/Creator/Dummy/HelpPage.vue
+++ b/src/components/Creator/Dummy/HelpPage.vue
@@ -98,8 +98,7 @@ defineEmits([
     border-radius: 32px;
     padding: 32px;
     float: right;
-    animation: slidein ease-out 0.25s;
-
+    animation: Blur ease-out 0.5s;
   }
 
   #helpmess > div > * {
@@ -148,7 +147,6 @@ defineEmits([
     justify-content: center;
     cursor: pointer;
     transition: all 0.25s;
-
   }
 
   #helpmess > div > div:not(.flags) > a:hover {
@@ -178,8 +176,7 @@ defineEmits([
     z-index: 15;
     align-items: center;
     justify-content: center;
-    animation: Blur ease-out 0.5s;
-  }
+}
 
   #helpmess > div {
     width: 80vw;
@@ -190,9 +187,8 @@ defineEmits([
     height: fit-content;
     padding: 5vh 0;
     float: right;
-    animation: slidein ease-out 0.25s;
-
-  }
+    animation: Blur ease-out 0.5s;
+}
 
   #helpmess > div > * {
     margin: 0;
diff --git a/src/components/Hero/HeroTitle.vue b/src/components/Hero/HeroTitle.vue
index 1f4d2f8..add390f 100644
--- a/src/components/Hero/HeroTitle.vue
+++ b/src/components/Hero/HeroTitle.vue
@@ -87,6 +87,10 @@ const props = defineProps(
 
   .herotitle > div > h1 {
     color: var(--ctt);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 50vw;
   }
 
   .herotitle > img {
diff --git a/src/components/Hero/PronounceCompat.vue b/src/components/Hero/PronounceCompat.vue
index 4073df5..d3717ca 100644
--- a/src/components/Hero/PronounceCompat.vue
+++ b/src/components/Hero/PronounceCompat.vue
@@ -74,7 +74,6 @@ defineEmits([
     z-index: 10;
     align-items: center;
     justify-content: center;
-    animation: Blur ease-out 0.5s;
   }
 
   .promess > div {
@@ -88,8 +87,7 @@ defineEmits([
     height: fit-content;
     padding: 32px;
     float: right;
-    animation: slidein ease-out 0.25s;
-
+    animation: Blur ease-out 0.5s;
   }
 
   .promess > div > * {
@@ -130,7 +128,6 @@ defineEmits([
     justify-content: center;
     cursor: pointer;
     transition: all 0.25s;
-
   }
 
   .promess > div > div > a:hover {
@@ -160,7 +157,6 @@ defineEmits([
     z-index: 15;
     align-items: center;
     justify-content: center;
-    animation: Blur ease-out 0.5s;
     background: var(--bg);
   }
 
@@ -173,8 +169,7 @@ defineEmits([
     height: fit-content;
     padding: 5vh 0;
     float: right;
-    animation: slidein ease-out 0.25s;
-
+    animation: Blur ease-out 0.5s;
   }
 
   .promess > div > * {
diff --git a/src/components/Transition/ErrorPage.vue b/src/components/Transition/ErrorPage.vue
index 4dc0c5d..4d8cedc 100644
--- a/src/components/Transition/ErrorPage.vue
+++ b/src/components/Transition/ErrorPage.vue
@@ -45,7 +45,6 @@ function getErrorMessage(errcode) {
     display: flex;
     align-items: center;
     justify-content: center;
-    animation: Blur ease-out 0.5s;
   }
 
   .err > div {
@@ -56,7 +55,7 @@ function getErrorMessage(errcode) {
     background: var(--wi);
     padding: 32px;
     border-radius: 32px;
-
+    animation: Blur ease-out 0.5s;
   }
 
   .err > div > * {
@@ -94,7 +93,6 @@ function getErrorMessage(errcode) {
     display: flex;
     align-items: center;
     justify-content: center;
-    animation: Blur ease-out 0.5s;
   }
 
   .err > div {
@@ -105,7 +103,7 @@ function getErrorMessage(errcode) {
     background: var(--bg);
     padding: 3vh;
     border-radius: 3vh;
-
+    animation: Blur ease-out 0.5s;
   }
 
   .err > div > * {
diff --git a/src/components/Transition/LoadingPage.vue b/src/components/Transition/LoadingPage.vue
index 83e3c7b..63b68ec 100644
--- a/src/components/Transition/LoadingPage.vue
+++ b/src/components/Transition/LoadingPage.vue
@@ -30,7 +30,6 @@ const userTag = routeObj.params.user;
     display: flex;
     align-items: center;
     justify-content: center;
-    animation: Blur ease-out 0.5s;
   }
 
   .loading > div {
@@ -41,7 +40,7 @@ const userTag = routeObj.params.user;
     background: var(--wi);
     padding: 32px;
     border-radius: 32px;
-
+    animation: Blur ease-out 0.5s;
   }
 
   .loading > div > * {
@@ -79,7 +78,6 @@ const userTag = routeObj.params.user;
     display: flex;
     align-items: center;
     justify-content: center;
-    animation: Blur ease-out 0.5s;
   }
 
   .loading > div {
@@ -90,7 +88,7 @@ const userTag = routeObj.params.user;
     background: var(--bg);
     padding: 3vh;
     border-radius: 3vh;
-
+    animation: Blur ease-out 0.5s;
   }
 
   .loading > div > * {
diff --git a/src/router/index.js b/src/router/index.js
index c659f6a..e222c5b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,27 +1,7 @@
 import {createRouter, createWebHashHistory} from 'vue-router'
-/*import HomeView from '../views/HomePage.vue'
-
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: HomeView
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].json) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/HeroPage.vue')
-    }
-  ]
-})
-
-export default router
-*/
+import HomePage from "@/views/HomePage.vue";
+import HeroCreator from "@/views/HeroCreator.vue";
+import HeroPageWrapper from "@/views/HeroPageWrapper.vue";
 
 export const router = createRouter({
     history: createWebHashHistory(),
@@ -29,14 +9,17 @@ export const router = createRouter({
         {
             path: '/',
             name: 'Home',
+            component: HomePage
         },
         {
             path: '/creator',
             name: 'Hero Creator',
+            component: HeroCreator
         },
         {
             path: '/:user/',
             name: 'Hero Page',
+            component: HeroPageWrapper
         }
     ]
 })
diff --git a/src/views/HeroCreator.vue b/src/views/HeroCreator.vue
index 3d9d16f..3829cfe 100644
--- a/src/views/HeroCreator.vue
+++ b/src/views/HeroCreator.vue
@@ -55,7 +55,7 @@ function showElem(val, showbool) {
   }
 }
 
-document.querySelector('head title').textContent = `Creator - PrettyHeroes`;
+document.querySelector('head title').textContent = `Creator - ${homeInfo.appName}`;
 document.querySelector("link[rel~='icon']").href = `/icons/create.png`;
 document.querySelector("meta[name='description']").content = `${homeInfo.tagLine}`
 document.querySelector("meta[name='og:title']").content = `Creator - ${homeInfo.appName}`
@@ -268,6 +268,7 @@ document.querySelector("meta[name='og:description']").content = `${homeInfo.tagL
     margin-right: 8px;
   }
 }
+
 @media screen and (orientation: portrait) {
   .creator {
     margin: 5vh 0;
diff --git a/src/views/HeroPage.vue b/src/views/HeroPage.vue
index 3742b45..a4370b4 100644
--- a/src/views/HeroPage.vue
+++ b/src/views/HeroPage.vue
@@ -18,6 +18,7 @@ const proShown = ref(false);
 
 const routeObj = useRoute();
 const userTag = routeObj.params.user;
+const noColor = routeObj.query.nocolor;
 
 let links = [
   {
@@ -36,7 +37,7 @@ for (let k in links) {
   if (res !== false) {
     switch (links[k].type) {
       case "toml":
-        res = loadAsToml(res);
+        res = loadAsToml(res, noColor);
         if (res === false) {
           isFetched.value = 2;
           break;
@@ -44,7 +45,7 @@ for (let k in links) {
         isFetched.value = 0;
         break;
       case "yaml":
-        res = loadAsYaml(res);
+        res = loadAsYaml(res, noColor);
         if (res === false) {
           isFetched.value = 2;
           break;
@@ -61,6 +62,13 @@ function showElem(val) {
   proShown.value = val;
 }
 
+if (noColor) {
+  let delparams = ['--cbg', '--cwi', '--clk', '--cho', '--ctt', '--ctxt'];
+  for (let elem in delparams) {
+    document.documentElement.style.removeProperty(delparams[elem]);
+  }
+}
+
 </script>
 
 <template>
diff --git a/src/views/HeroPageWrapper.vue b/src/views/HeroPageWrapper.vue
new file mode 100644
index 0000000..b312677
--- /dev/null
+++ b/src/views/HeroPageWrapper.vue
@@ -0,0 +1,17 @@
+<script setup>
+import LoadingPage from "@/App.vue";
+import HeroPage from "@/views/HeroPage.vue";
+</script>
+
+<template>
+  <Suspense>
+    <template #fallback>
+      <LoadingPage/>
+    </template>
+    <HeroPage/>
+  </Suspense>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 037cfc9..66905a8 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -18,7 +18,7 @@ function goTo(place) {
   router.push(place);
 }
 
-document.querySelector('head title').textContent = `PrettyHeroes`;
+document.querySelector('head title').textContent = homeInfo.appName;
 document.querySelector("link[rel~='icon']").href = `/favicon.png`;
 document.querySelector("meta[name~='description']").setAttribute("content", `${homeInfo.tagLine}`);
 document.querySelector("meta[name~='og:title']").setAttribute("content", `${homeInfo.appName}`);
@@ -190,7 +190,7 @@ document.querySelector("meta[name~='og:description']").setAttribute("content", `
     z-index: 6;
   }
 
-  .query > *:not(:last-child){
+  .query > *:not(:last-child) {
     margin-right: 8px;
   }
 }