Change homepage to Videos

Soleone · Sep 1, 2021 · 4e63e05 · 4e63e05
1 parent 7194a4a
commit 4e63e05
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 65 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,12 +1,17 @@
 # Changelog
 
+### 0.2.13
+
+- Change homepage to Videos and move old home to About
+
 ### 0.2.12
 
 - Add Esports and Interview categories
 
 ### 0.2.11
 
 - Add RSS feed link for video subscriptions
+
 ### 0.2.10
 
 - Fetch published date from Youtube API and use it to sort video list by

diff --git a/src/App.vue b/src/App.vue
@@ -3,24 +3,25 @@
     <v-app-bar color="#263238" dark app>
       <div class="d-flex align-center px-0">
         <v-img
-          @click="$router.push({ name: 'Home' })"
+          @click="$router.push({ name: 'Videos' })"
           alt="Gods Unchained Logo"
           class="mr-2 clickable"
           src="@/assets/images/gods-unchained-logo-256.png"
           width="32"
         />
 
         <v-toolbar-title>
-          <span @click="$router.push({ name: 'Home' })" class="clickable">
+          <span @click="$router.push({ name: 'Videos' })" class="clickable">
             <span class="d-none d-sm-inline">Gunchained</span>
             <span class="d-inline d-sm-none">GU</span>
           </span>
           <span class="d-none d-sm-inline">
-             {{ title }}
+            {{ title }}
           </span>
         </v-toolbar-title>
 
         <v-chip
+          v-show="title == 'Arena'"
           :disabled="activeUserCount < 2"
           color="green darken-2"
           class="ml-sm-4 ml-2"
@@ -63,13 +64,22 @@
         </div>
       </v-toolbar-items>
 
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer" class="mr-1"></v-app-bar-nav-icon>
+      <v-app-bar-nav-icon
+        @click.stop="drawer = !drawer"
+        class="mr-1"
+      ></v-app-bar-nav-icon>
     </v-app-bar>
 
     <v-navigation-drawer v-model="drawer" fixed temporary right width="300">
       <span v-for="(section, index) in navigation" :key="index">
         <v-list dense nav>
-          <GATrack v-for="link in section" link :key="link.label" event-name="navigationClicked" :event-label="link.label">
+          <GATrack
+            v-for="link in section"
+            link
+            :key="link.label"
+            event-name="navigationClicked"
+            :event-label="link.label"
+          >
             <v-list-item link :to="link.route">
               <v-list-item-icon>
                 <v-icon>{{ link.icon }}</v-icon>
@@ -172,13 +182,6 @@ export default {
       version: VERSION,
       drawer: false,
       navigation: [
-        [
-          {
-            label: 'Arena',
-            icon: 'mdi-fencing',
-            route: { name: 'Arena'},
-          }
-        ],
         [
           {
             label: 'Videos',
@@ -190,6 +193,20 @@ export default {
             icon: 'mdi-message-plus-outline',
             route: { name: 'Feedback' }
           }
+        ],
+        [
+          {
+            label: 'Arena',
+            icon: 'mdi-fencing',
+            route: { name: 'Arena' }
+          }
+        ],
+        [
+          {
+            label: 'About',
+            icon: 'mdi-information-outline',
+            route: { name: 'About' }
+          }
         ]
       ]
     }
@@ -220,7 +237,7 @@ export default {
   },
   methods: {
     logout() {
-      console.log("Logging out")
+      console.log('Logging out')
       firebase
         .auth()
         .signOut()
@@ -230,7 +247,7 @@ export default {
             message: 'Logged out.',
             color: 'default'
           })
-          this.$router.push({ name: 'Home' })
+          this.$router.push({ name: 'About' })
         })
     },
     updateAvailability() {

diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -52,6 +52,6 @@ export const CHANNELS_BY_AUTHOR = {
   Rogvarok: 'https://www.youtube.com/channel/UCdaFKgefAytNPi-kmPOQcaw',
   Fakemews9: 'https://www.youtube.com/channel/UCbopgNya6aLhYi6GE8mNMvw',
   TGRInteractive: 'https://www.youtube.com/channel/UCctybG40v1jj-exD5D8VqoA',
-  BadBabaGU: 'https://www.youtube.com/channel/UCgoEoyKD-kTuSQQpSQpI1aA/videos',
+  BadBabaGU: 'https://www.youtube.com/channel/UCgoEoyKD-kTuSQQpSQpI1aA',
   ClutchHS: 'https://www.youtube.com/channel/UCUqvAp0-3XIhx27FFt7pGIA'
 }
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+import About from '../views/About.vue'
 import Arena from '../views/Arena.vue'
 import Login from '../views/Login.vue'
 import Player from '../views/Player.vue'
@@ -12,10 +12,15 @@ import Feedback from '../views/Feedback.vue'
 Vue.use(VueRouter)
 
 const routes = [
+  {
+    path: '/about',
+    name: 'About',
+    component: About
+  },
   {
     path: '/',
-    name: 'Home',
-    component: Home
+    name: 'Videos',
+    component: Videos
   },
   {
     path: '/arena',
@@ -32,11 +37,6 @@ const routes = [
     name: 'Player',
     component: Player
   },
-  {
-    path: '/videos',
-    name: 'Videos',
-    component: Videos
-  },
   {
     path: '/videos/:id',
     name: 'VideoShow',

diff --git a/src/views/Home.vue → src/views/About.vue b/src/views/Home.vue → src/views/About.vue
@@ -3,15 +3,19 @@
     <v-row>
       <v-col class="text-center">
         <h1 class="text-h6">Welcome to Gunchained</h1>
-        <p class="text-subtitle-1">Content and tools for <a href="https://godsunchained.com">Gods Unchained</a></p>
+        <p class="text-subtitle-1">
+          Content and tools for
+          <a href="https://godsunchained.com">Gods Unchained</a>
+        </p>
       </v-col>
     </v-row>
 
     <v-row>
       <v-spacer></v-spacer>
       <v-col cols="12" lg="6">
         <v-alert type="info" text>
-          Navigate using the <v-icon small light>mdi-menu</v-icon> Menu button in the top right corner.
+          Navigate using the <v-icon small light>mdi-menu</v-icon> Menu button
+          in the top right corner.
         </v-alert>
       </v-col>
       <v-spacer></v-spacer>
@@ -22,19 +26,25 @@
       <v-col cols="5" class="green lighten-5 rounded">
         <p>
           <GATrack event-name="navigationClickedFromHome" event-label="Arena">
-            <v-btn color="success" to="/arena"><v-icon left>mdi-fencing</v-icon> Arena</v-btn>
+            <v-btn color="success" to="/arena"
+              ><v-icon left>mdi-fencing</v-icon> Arena</v-btn
+            >
           </GATrack>
         </p>
         <p>
-          Find other players to play against. Useful for casual matches or organizing a tournament setting.
+          Find other players to play against. Useful for casual matches or
+          organizing a tournament setting.
         </p>
         <p>
           To share your invite code you will have to
           <GATrack event-name="navigationClickedFromHome" event-label="Sign in">
             <a href="/login">sign in</a>
           </GATrack>
           first to be able to fill out your
-          <GATrack event-name="navigationClickedFromHome" event-label="Player profile">
+          <GATrack
+            event-name="navigationClickedFromHome"
+            event-label="Player profile"
+          >
             <a href="/player">player profile</a>
           </GATrack>
           .
@@ -44,7 +54,9 @@
       <v-col cols="5" class="red lighten-5 rounded">
         <p>
           <GATrack event-name="navigationClickedFromHome" event-label="Videos">
-            <v-btn color="error" to="/videos"><v-icon left>mdi-youtube</v-icon> Videos</v-btn>
+            <v-btn color="error" :to="{ name: 'Videos' }"
+              ><v-icon left>mdi-youtube</v-icon> Videos</v-btn
+            >
           </GATrack>
         </p>
         <p>
@@ -60,12 +72,12 @@
 import GATrack from '@/components/shared/GATrack.js'
 
 export default {
-  name: 'Home',
+  name: 'About',
   components: {
     GATrack
   },
   mounted() {
-    this.$store.dispatch('setTitle', 'Home')
-  },
+    this.$store.dispatch('setTitle', 'About')
+  }
 }
-</script>
+</script>
diff --git a/src/views/Player.vue b/src/views/Player.vue
@@ -158,7 +158,7 @@ export default {
     updatePlayer() {
       this.$gtag.event('updatePlayer')
       this.$store.dispatch('updatePlayer', this.player)
-      this.$router.push({ name: 'Home' })
+      this.$router.push({ name: 'About' })
     }
   },
   watch: {

diff --git a/src/views/VideoShow.vue b/src/views/VideoShow.vue
@@ -1,8 +1,8 @@
 <template>
   <v-container>
-    <v-row >
+    <v-row>
       <v-col class="text-center">
-        <v-btn to="/videos" color="primary">
+        <v-btn :to="{ name: 'Videos' }" color="primary">
           <v-icon left>mdi-arrow-left</v-icon>
           Back
         </v-btn>
@@ -23,13 +23,13 @@ import { mapState } from 'vuex'
 export default {
   name: 'VideoShow',
   components: {
-    Video
+    Video,
   },
   props: {
     id: {
       type: String,
-      required: false
-    }
+      required: false,
+    },
   },
   mounted() {
     this.$store.dispatch('loadCurrentVideo', this.id)
@@ -38,11 +38,11 @@ export default {
     ...mapState({ video: 'currentVideo' }),
     breadcrumbs() {
       return [
-        { text: 'Videos', href: '/videos' },
-        { text: this.video.title }
+        { text: 'Videos', to: "{ name: 'Videos' }" },
+        { text: this.video.title },
       ]
     },
-  }
+  },
 }
 </script>