.editorconfig

@@ -1,5 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 4

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "vite",
+    "serve": "vue-cli-service serve",
-    "build": "vite build --out-dir dist"
+    "build": "vue-cli-service build"
   },
   "dependencies": {
     "aos": "^2.3.4",
@@ -18,10 +18,11 @@
     "vue-twitter": "^0.1.0"
   },
   "devDependencies": {
-    "vite": "^2.2.1",
+    "@vue/cli-plugin-babel": "^4.5.9",
-    "vite-plugin-vue2": "^1.4.4",
+    "@vue/cli-plugin-router": "^4.5.9",
-    "@vue/compiler-sfc": "^3.0.11",
+    "@vue/cli-service": "^4.5.9",
     "sass": "^1.32.0",
+    "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.12"
   }
 }

public/index.html

@@ -19,11 +19,11 @@
 	<meta property="twitter:card" content="summary_large_image">
 
     <!-- favicon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon-16x16.png">
-    <link rel="manifest" href="/site.webmanifest">
+    <link rel="manifest" href="site.webmanifest">
-  	<link rel="icon" href="/favicon.ico">
+	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
     <!-- nprogress -->
     <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
@@ -47,7 +47,7 @@
       <strong>We're sorry but APL Esports doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <!-- built files will be auto injected -->
     <script>
       AOS.init();
 
@@ -61,5 +61,6 @@
         NProgress.done()
       };
     </script>
+    </script>
   </body>
 </html>

src/components/Header.vue

@@ -31,13 +31,16 @@
                         </svg>
                     </div>
 
-                    <router-link :to="{ name: 'Home' }" @click="closeMenu()">home</router-link>
+                    <router-link :to="{ name: 'Home' }" @click.native="closeMenu()">home</router-link>
-                    <router-link :to="{ name: 'RumbleMain' }" :class="$route.name === 'RegionalRumble' && 'router-link-active' ? 'active' : ''" @click="closeMenu()">Regional Rumble</router-link>
+                    <router-link :to="{ name: 'RumbleMain' }" :class="$route.name === 'RegionalRumble' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">Regional Rumble</router-link>
-                    <router-link :to="{ name: 'Nationals' }" :class="$route.name === 'Nationals' && 'router-link-active' ? 'active' : ''" @click="closeMenu()">nationals</router-link>
+                    <router-link :to="{ name: 'Nationals' }" :class="$route.name === 'Nationals' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">nationals</router-link>
-  <router-link :to="{ name: 'News' }" :class="$route.name === 'News' && 'router-link-active' || $route.name === 'Article' && 'router-link-active' ? 'active' : ''" @click="closeMenu()">news</router-link>
+                    <!--<router-link :to="{ name: 'Kickoff' }" :class="$route.name === 'Kickoff' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">the kickoff</router-link>-->
-                    <router-link :to="{ name: 'Tournaments' }" @click="closeMenu()">tournaments</router-link>
+  <router-link :to="{ name: 'News' }" :class="$route.name === 'News' && 'router-link-active' || $route.name === 'Article' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">news</router-link>
-                    <router-link :to="{ name: 'Team' }" @click="closeMenu()">team</router-link>
+                    <router-link :to="{ name: 'Tournaments' }" @click.native="closeMenu()">tournaments</router-link>
-                    <a href="https://discord.gg/q6Nf2eh" target="_blank" @click="closeMenu()">discord</a>
+                    <router-link :to="{ name: 'Team' }" @click.native="closeMenu()">team</router-link>
+                    <a href="https://discord.gg/q6Nf2eh" target="_blank" @click.native="closeMenu()">discord</a>
+                    <!-- <a href="https://www.patreon.com/apl_esports" target="_blank" @click.native="closeMenu()">patreon</a> -->
+                    <!--<a href="https://donate.aplesports.com" target="_blank" @click.native="closeMenu()">donate</a>-->
                 </div>                
             </nav>
         </div>

src/router/index.js

@@ -14,27 +14,27 @@ Vue.use(VueRouter)
   {
     path: '/team',
     name: 'Team',
-    component: () => import('../views/About.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   },
   {
     path: '/news',
     name: 'News',
-    component: () => import('../views/News.vue')
+    component: () => import(/* webpackChunkName: "news" */'../views/News.vue')
   },
   {
     path: '/news/:id',
     name: 'Article',
-    component: () => import('../views/Article.vue')
+    component: () => import(/* webpackChunkName: "news" */'../views/Article.vue')
   },
   {
     path: '/tournaments',
     name: 'Tournaments',
-    component: () => import('../views/Tournaments.vue')
+    component: () => import(/* webpackChunkName: "tournaments" */'../views/Tournaments.vue')
   },
   {
     path: '/thekickoff',
     name: 'Kickoff',
-    component: () => import('../views/Kickoff.vue')
+    component: () => import(/* webpackChunkName: "tournaments" */'../views/Kickoff.vue')
   },
   {
     path: '/nationals',
@@ -79,7 +79,7 @@ Vue.use(VueRouter)
 
 const router = new VueRouter({
   mode: 'history',
-  base: import.meta.env.BASE_URL,
+  base: process.env.BASE_URL,
   linkExactActiveClass: 'active',
   routes,
   scrollBehavior (to, from, savedPosition) {

src/views/Article.vue

@@ -27,7 +27,10 @@
 
 <script>
 import axios from 'axios';
-import * as MarkDownIt from 'markdown-it';
+const md = require('markdown-it')({
+    breaks: true,
+    html: true
+});
 
 export default {
     name: 'Article',
@@ -38,15 +41,11 @@ export default {
             id: null,
             image: null,
             content: null,
-            imgRoot: 'https://cms.aplesports.com/storage/uploads',
+            imgRoot: 'https://cms.aplesports.com/storage/uploads'
         }
     },
     created() {
         this.id = this.$route.params.id;
-        const md = new MarkDownIt({
-            breaks: true,
-            html: true,
-        });
 
         axios.post("https://cms.aplesports.com/api/collections/get/News", {
             "sort": {
@@ -66,7 +65,7 @@ export default {
             }
             }, {
             headers: {
-                'Cockpit-Token': import.meta.env.VITE_CMS_TOKEN
+                'Cockpit-Token': process.env.VUE_APP_CMS_TOKEN
             }
         })
         .then((res) => {
@@ -94,7 +93,7 @@ export default {
                     }
                     }, {
                     headers: {
-                        'Cockpit-Token': import.meta.env.VITE_CMS_TOKEN
+                        'Cockpit-Token': process.env.VUE_APP_CMS_TOKEN
                     }
                 })
                 .then((res) => {

src/views/Home.vue

@@ -5,20 +5,11 @@
       <main>
         <div class="background-apl-text">APL</div>
         <small>Welcome To</small>
-                <img
+        <img src="https://cms.aplesports.com/storage/uploads/2020/04/23/5ea178d6570e1APL_New.png" alt="APL Esports Logo">
-                    src="https://cms.aplesports.com/storage/uploads/2020/04/23/5ea178d6570e1APL_New.png"
+        <br>
-                    alt="APL Esports Logo"
-                />
-                <br />
         <big>APL Esports</big>
-                <p>
+        <p>An independent tournament organiser that combines the experience of various community figures in Asia to produce premier tournaments.</p>
-                    An independent tournament organiser that combines the
+        <router-link :to="{ name: 'Team' }" class="btn">Our Team</router-link>
-                    experience of various community figures in Asia to produce
-                    premier tournaments.
-                </p>
-                <router-link :to="{ name: 'Team' }" class="btn"
-                    >Our Team</router-link
-                >
       </main>
     </div>
     <!-- end hero section -->
@@ -30,53 +21,25 @@
       </div>
       <div class="grid">
         <div class="big">
-                    <router-link
+          <router-link v-if="this.posts[0].link" :to="'news/' + this.posts[0].link">
-                        v-if="this.posts[0].link"
+            <div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[0].image.path + ')' }">
-                        :to="'news/' + this.posts[0].link"
-                    >
-                        <div
-                            class="panel"
-                            v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[0].image.path + ')', }"
-                        >
               <div class="overlay"></div>
               <div class="ptitle">{{ this.posts[0].title }}</div>
               <div class="author_name">
-                                <svg
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                    xmlns="http://www.w3.org/2000/svg"
+                  <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
-                                    viewBox="0 0 20 20"
-                                >
-                                    <path
-                                        d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"
-                                    />
                 </svg> 
                 {{ this.posts[0].author }}
               </div>
             </div>
           </router-link>
-                    <router-link
+          <router-link v-else :to="'news/' + this.posts[0].title_slug">
-                        v-else
+            <div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[0].image.path + ')' }">
-                        :to="'news/' + this.posts[0].title_slug"
-                    >
-                        <div
-                            class="panel"
-                            v-bind:style="{
-                                'background-image':
-                                    'url(' +
-                                    imgRoot +
-                                    this.posts[0].image.path +
-                                    ')',
-                            }"
-                        >
               <div class="overlay"></div>
               <div class="ptitle">{{ this.posts[0].title }}</div>
               <div class="author_name">
-                                <svg
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                    xmlns="http://www.w3.org/2000/svg"
+                  <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
-                                    viewBox="0 0 20 20"
-                                >
-                                    <path
-                                        d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"
-                                    />
                 </svg> 
                 {{ this.posts[0].author }}
               </div>
@@ -85,59 +48,25 @@
         </div>
         <div class="inner-grid">
           <div class="small1">
-                        <router-link
+            <router-link v-if="this.posts[1].link" :to="'news/' + this.posts[1].link">
-                            v-if="this.posts[1].link"
+              <div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[1].image.path + ')' }">
-                            :to="'news/' + this.posts[1].link"
-                        >
-                            <div
-                                class="panel"
-                                v-bind:style="{
-                                    'background-image':
-                                        'url(' +
-                                        imgRoot +
-                                        this.posts[1].image.path +
-                                        ')',
-                                }"
-                            >
                 <div class="overlay"></div>
                 <p class="ptitle">{{ this.posts[1].title }}</p>
                 <div class="author_name">
-                                    <svg
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                        xmlns="http://www.w3.org/2000/svg"
+                    <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
-                                        viewBox="0 0 20 20"
-                                    >
-                                        <path
-                                            d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"
-                                        />
                   </svg> 
                   {{ this.posts[1].author }}
                 </div>
               </div>
             </router-link>
-                        <router-link
+            <router-link v-else :to="'news/' + this.posts[1].title_slug">
-                            v-else
+              <div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[1].image.path + ')' }">
-                            :to="'news/' + this.posts[1].title_slug"
-                        >
-                            <div
-                                class="panel"
-                                v-bind:style="{
-                                    'background-image':
-                                        'url(' +
-                                        imgRoot +
-                                        this.posts[1].image.path +
-                                        ')',
-                                }"
-                            >
                 <div class="overlay"></div>
                 <p class="ptitle">{{ this.posts[1].title }}</p>
                 <div class="author_name">
-                                    <svg
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                        xmlns="http://www.w3.org/2000/svg"
+                    <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
-                                        viewBox="0 0 20 20"
-                                    >
-                                        <path
-                                            d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"
-                                        />
                   </svg> 
                   {{ this.posts[1].author }}
                 </div>
@@ -145,59 +74,25 @@
             </router-link>
           </div>
           <div class="small2">
-                        <router-link
+            <router-link v-if="this.posts[2].link" :to="'news/' + this.posts[2].link">
-                            v-if="this.posts[2].link"
+              <div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[2].image.path + ')' }">
-                            :to="'news/' + this.posts[2].link"
-                        >
-                            <div
-                                class="panel"
-                                v-bind:style="{
-                                    'background-image':
-                                        'url(' +
-                                        imgRoot +
-                                        this.posts[2].image.path +
-                                        ')',
-                                }"
-                            >
                 <div class="overlay"></div>
                 <p class="ptitle">{{ this.posts[2].title }}</p>
                 <div class="author_name">
-                                    <svg
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                        xmlns="http://www.w3.org/2000/svg"
+                    <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
-                                        viewBox="0 0 20 20"
-                                    >
-                                        <path
-                                            d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"
-                                        />
                   </svg> 
                   {{ this.posts[2].author }}
                 </div>
               </div>
             </router-link>
-                        <router-link
+            <router-link v-else :to="'news/' + this.posts[2].title_slug">
-                            v-else
+              <div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[2].image.path + ')' }">
-                            :to="'news/' + this.posts[2].title_slug"
-                        >
-                            <div
-                                class="panel"
-                                v-bind:style="{
-                                    'background-image':
-                                        'url(' +
-                                        imgRoot +
-                                        this.posts[2].image.path +
-                                        ')',
-                                }"
-                            >
                 <div class="overlay"></div>
                 <p class="ptitle">{{ this.posts[2].title }}</p>
                 <div class="author_name">
-                                    <svg
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                        xmlns="http://www.w3.org/2000/svg"
+                    <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
-                                        viewBox="0 0 20 20"
-                                    >
-                                        <path
-                                            d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"
-                                        />
                   </svg> 
                   {{ this.posts[2].author }}
                 </div>
@@ -216,24 +111,13 @@
       </div>
       <div class="tournament">
         <div class="container">
-                    <img :src="torRoot + this.tournaments?.logo.path" alt="" />
+          <img :src="torRoot + this.tournaments.logo.path" alt="">
           <div class="text">
-                        <div class="name">{{ this.tournaments?.name }}</div>
+            <div class="name">{{ this.tournaments.name }}</div>
-                        <div class="date">
+            <div class="date">Date: {{ this.tournaments.date }}</div>
-                            Date: {{ this.tournaments?.date }}
+            <div class="time">Time: {{ this.tournaments.time }}</div>
-                        </div>
+            <div class="pool">Prizepool: {{ this.tournaments.prize }}</div>
-                        <div class="time">
+            <a :href="this.tournaments.link" class="btn" target="_blank">Details</a>
-                            Time: {{ this.tournaments?.time }}
-                        </div>
-                        <div class="pool">
-                            Prizepool: {{ this.tournaments?.prize }}
-                        </div>
-                        <a
-                            :href="this.tournaments?.link"
-                            class="btn"
-                            target="_blank"
-                            >Details</a
-                        >
           </div>
         </div>
       </div>
@@ -244,6 +128,10 @@
     <section class="tweets">
       <div class="container">
         <div class="title">latest tweet</div>
+        <twitter class="twitter">
+          <div slot="loading">Loading...</div>
+          <a class="twitter-timeline" data-width="1000" data-tweet-limit="1" data-chrome="noheader nofooter noborders transparent" data-lang="en" data-theme="dark" href="https://twitter.com/APL_Esports">@APL_Esports</a>
+        </twitter>
       </div>
     </section>
     <!-- end tweets -->
@@ -252,7 +140,7 @@
 
 <script>
 import axios from 'axios'
-//import { twitter } from 'vue-twitter'
+import { twitter } from 'vue-twitter'
 
 export default {
   name: 'Home',
@@ -261,50 +149,46 @@ export default {
       posts: {},
       tournaments: {},
       imgRoot: 'https://cms.aplesports.com/storage/uploads',
-            torRoot: 'https://cms.aplesports.com',
+      torRoot: 'https://cms.aplesports.com'
     }
   },
   created() {
-        axios
+    axios.post("https://cms.aplesports.com/api/collections/get/News", {
-            .post(
+      "sort": {
-                'https://cms.aplesports.com/api/collections/get/News',
+        "_created": -1
-                {
-                    sort: {
-                        _created: -1,
       },
-                    limit: 3,
+      "limit": 3,
-                    filter: {
+      "filter": {
-                        published: true,
+        "published": true
       },
-                    fields: {
+      "fields": {
-                        title: 1,
+        "title": 1,
-                        image: 1,
+        "image": 1,
-                        title_slug: 1,
+        "title_slug": 1,
-                        _by: 1,
+        "_by": 1,
-                        link: 1,
+        "link": 1
-                    },
+      }
-                },
+    } ,{
-                {
       headers: {
-                        'Cockpit-Token': import.meta.env.VITE_CMS_TOKEN,
+        'Cockpit-Token': process.env.VUE_APP_CMS_TOKEN
-                    },
       }
-            )
+    })
     .then((res) => {
-                this.posts = res.data.entries;
+      this.posts = res.data.entries
     })
 
-        axios
+    axios.get("https://cms.aplesports.com/api/collections/get/Tournaments", {
-            .get('https://cms.aplesports.com/api/collections/get/Tournaments', {
         headers: {
-                    'Cockpit-Token': import.meta.env.VITE_CMS_TOKEN,
+            'Cockpit-Token': process.env.VUE_APP_CMS_TOKEN
-                },
+      }
     })
     .then((res2) => {
-                let tourneys = res2.data.entries;
+      let tourneys = res2.data.entries
-                this.tournaments = tourneys[tourneys.length - 1];
+      this.tournaments = tourneys[tourneys.length - 1]
-                console.log(Promise.resolve(res2.data.entries[res2.data.entries.length - 1]));
+    })
-            });
   },
+  components: {
+	  twitter
+  }
 }
 </script>

vite.config.js

@@ -1,22 +0,0 @@
-import { defineConfig } from 'vite';
-import { createVuePlugin } from 'vite-plugin-vue2';
-import path from 'path';
-
-export default defineConfig({
-  plugins: [ createVuePlugin() ],
-  server: {
-    port: 3000
-  },
-  resolve: {
-    alias: [
-      {
-        find: '@',
-        replacement: path.resolve(__dirname, 'src'),
-      },
-    ],
-  },
-  build: {
-    chunkSizeWarningLimit: 600,
-    cssCodeSplit: false
-  },
-});