refactor vue-router configuration and use of $router.options.routes instead of custom config object; bump node dependencies and .NET Core nuget packages

Author: based-ghost

.vscode/launch.json

@@ -0,0 +1,36 @@
+{
+   // Use IntelliSense to find out which attributes exist for C# debugging
+   // Use hover for the description of the existing attributes
+   // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
+   "version": "0.2.0",
+   "configurations": [
+        {
+            "name": ".NET Core Launch (web)",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            // If you have changed target frameworks, make sure to update the program path.
+            "program": "${workspaceFolder}/GhostUI/bin/Debug/netcoreapp3.1/GhostUI.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}/GhostUI",
+            "stopAtEntry": false,
+            // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
+            "serverReadyAction": {
+                "action": "openExternally",
+                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
+            },
+            "env": {
+                "ASPNETCORE_ENVIRONMENT": "Development"
+            },
+            "sourceFileMap": {
+                "/Views": "${workspaceFolder}/Views"
+            }
+        },
+        {
+            "name": ".NET Core Attach",
+            "type": "coreclr",
+            "request": "attach",
+            "processId": "${command:pickProcess}"
+        }
+    ]
+}

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "build",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "build",
+                "${workspaceFolder}/GhostUI/GhostUI.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "publish",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "publish",
+                "${workspaceFolder}/GhostUI/GhostUI.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "watch",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "watch",
+                "run",
+                "${workspaceFolder}/GhostUI/GhostUI.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        }
+    ]
+}

GhostUI/ClientApp/.browserslistrc

@@ -1,4 +1,3 @@
-> 0.2%
+> 1%
 last 2 versions
 not dead
-not op_mini all

GhostUI/ClientApp/package-lock.json

@@ -19,13 +19,13 @@
     "@fortawesome/vue-fontawesome": "^2.0.0",
     "@microsoft/signalr": "^3.1.8",
     "axios": "^0.20.0",
-    "bulma": "^0.9.0",
+    "bulma": "^0.9.1",
     "core-js": "^3.6.5",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.12",
     "vue-class-component": "^7.2.6",
     "vue-property-decorator": "^9.0.0",
-    "vue-router": "^3.4.3",
+    "vue-router": "^3.4.5",
     "vue-snotify": "^3.2.1",
     "vue-styled-components": "^1.5.1",
     "vuex": "^3.5.1"
@@ -42,7 +42,7 @@
     "@vue/test-utils": "1.1.0",
     "node-sass": "^4.14.1",
     "sass-loader": "^10.0.2",
-    "ts-jest": "^26.4.0",
+    "ts-jest": "^26.4.1",
     "typescript": "^4.0.3",
     "vue-svg-loader": "^0.16.0",
     "vue-template-compiler": "^2.6.12",

GhostUI/ClientApp/package.json

@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { AppFooter, Navbar, Settings } from "@/components";
+import { AppFooter, Navbar, Settings } from "./components";
 
 @Component({
   components: {

GhostUI/ClientApp/src/App.vue

@@ -8,18 +8,18 @@
   opacity: 0;
 }
 
-.pageSlideRight-enter-active {
+.page-slide-right-enter-active {
   animation: page-enter-slideRight both cubic-bezier(0.4, 0, 0, 1.5);
   animation-duration: 0.35s;
 }
 
-.pageSlideLeft-enter-active {
+.page-slide-left-enter-active {
   animation: page-enter-slideLeft both cubic-bezier(0.4, 0, 0, 1.5);
   animation-duration: 0.35s;
 }
 
-.pageSlideRight-leave-active,
-.pageSlideLeft-leave-active {
+.page-slide-right-leave-active,
+.page-slide-left-leave-active {
   animation: page-leave-fadeOut ease;
   animation-duration: 0.25s;
 }

GhostUI/ClientApp/src/assets/style/scss/base/transitions.scss

@@ -76,7 +76,7 @@
       margin-bottom: 0.5rem;
       margin-left: auto;
       margin-right: auto;
-      border-bottom: 1px solid rgba(0,0,0,.125);
+      border-bottom: 1px solid rgba(0,0,0,.1);
     }
 
     .dropdown-item {
@@ -91,7 +91,7 @@
       > svg {
         opacity: 0.8;
         margin-left: 0.3rem;
-        margin-right: 0.3rem;
+        margin-right: 0.5rem;
       }
     }
 

GhostUI/ClientApp/src/assets/style/scss/scoped/settings.scss

@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { Component, Prop, Watch, Vue } from "vue-property-decorator";
-import { AuthStatusEnum } from "@/store/modules/auth";
+import { AuthStatusEnum } from "../store/modules/auth";
 
 @Component
 export default class Authenticator extends Vue {

GhostUI/ClientApp/src/components/Authenticator.vue

@@ -12,7 +12,7 @@
       <div class="navbar-routes">
         <div v-if="isAuthenticated" class="navbar-items-group">
           <router-link
-            v-for="route in navRoutes"
+            v-for="route in validNavRoutes"
             :key="route.path"
             :to="route.path"
             class="navbar-item"
@@ -27,8 +27,8 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { RoutesConfig, Route } from "@/config/routes.config";
-import { AuthModule } from "@/store/modules/auth";
+import { RouteConfig } from 'vue-router';
+import { AuthModule } from "../store/modules/auth";
 import BulmaLogo from "@/assets/img/BulmaLogo.svg?inline";
 
 @Component({
@@ -41,11 +41,9 @@ export default class Navbar extends Vue {
     return AuthModule.isAuthenticated;
   }
 
-  public navRoutes: Route[] = Object.keys(RoutesConfig).reduce((acc, key) => {
-    const route = RoutesConfig[key];
-    route.meta.showInNav && acc.push(route);
-    return acc;
-  }, [] as Route[]);
+  get validNavRoutes(): RouteConfig[] {
+    return this.$router.options.routes.filter(({ meta }) => !!meta.showInNav);
+  }
 }
 </script>