tried but leave it

.editorconfig

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

babel.config.js

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

index.html

@@ -19,11 +19,11 @@
 	<meta property="twitter:card" content="summary_large_image">
 
     <!-- favicon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="manifest" href="site.webmanifest">
+    <link rel="manifest" href="/site.webmanifest">
-	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  	<link rel="icon" href="/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>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.js"></script>
     <script>
       AOS.init();
 
@@ -61,6 +61,5 @@
         NProgress.done()
       };
     </script>
-    </script>
   </body>
 </html>

package.json

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

src/components/Header.vue

@@ -31,16 +31,13 @@
                         </svg>
                     </div>
 
-                    <router-link :to="{ name: 'Home' }" @click.native="closeMenu()">home</router-link>
+                    <router-link :to="{ name: 'Home' }" @click="closeMenu()">home</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: 'RumbleMain' }" :class="$route.name === 'RegionalRumble' && 'router-link-active' ? 'active' : ''" @click="closeMenu()">Regional Rumble</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: 'Nationals' }" :class="$route.name === 'Nationals' && 'router-link-active' ? 'active' : ''" @click="closeMenu()">nationals</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: 'News' }" :class="$route.name === 'News' && 'router-link-active' || $route.name === 'Article' && 'router-link-active' ? 'active' : ''" @click="closeMenu()">news</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: 'Tournaments' }" @click="closeMenu()">tournaments</router-link>
-                    <router-link :to="{ name: 'Tournaments' }" @click.native="closeMenu()">tournaments</router-link>
+                    <router-link :to="{ name: 'Team' }" @click="closeMenu()">team</router-link>
-                    <router-link :to="{ name: 'Team' }" @click.native="closeMenu()">team</router-link>
+                    <a href="https://discord.gg/q6Nf2eh" target="_blank" @click="closeMenu()">discord</a>
-                    <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(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import('../views/About.vue')
   },
   {
     path: '/news',
     name: 'News',
-    component: () => import(/* webpackChunkName: "news" */'../views/News.vue')
+    component: () => import('../views/News.vue')
   },
   {
     path: '/news/:id',
     name: 'Article',
-    component: () => import(/* webpackChunkName: "news" */'../views/Article.vue')
+    component: () => import('../views/Article.vue')
   },
   {
     path: '/tournaments',
     name: 'Tournaments',
-    component: () => import(/* webpackChunkName: "tournaments" */'../views/Tournaments.vue')
+    component: () => import('../views/Tournaments.vue')
   },
   {
     path: '/thekickoff',
     name: 'Kickoff',
-    component: () => import(/* webpackChunkName: "tournaments" */'../views/Kickoff.vue')
+    component: () => import('../views/Kickoff.vue')
   },
   {
     path: '/nationals',
@@ -79,7 +79,7 @@ Vue.use(VueRouter)
 
 const router = new VueRouter({
   mode: 'history',
-  base: process.env.BASE_URL,
+  base: import.meta.env.BASE_URL,
   linkExactActiveClass: 'active',
   routes,
   scrollBehavior (to, from, savedPosition) {

src/views/Article.vue

@@ -27,10 +27,7 @@
 
 <script>
 import axios from 'axios';
-const md = require('markdown-it')({
+import * as MarkDownIt from 'markdown-it';
-    breaks: true,
-    html: true
-});
 
 export default {
     name: 'Article',
@@ -41,11 +38,15 @@ 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": {
@@ -65,7 +66,7 @@ export default {
             }
             }, {
             headers: {
-                'Cockpit-Token': process.env.VUE_APP_CMS_TOKEN
+                'Cockpit-Token': import.meta.env.VITE_CMS_TOKEN
             }
         })
         .then((res) => {
@@ -93,7 +94,7 @@ export default {
                     }
                     }, {
                     headers: {
-                        'Cockpit-Token': process.env.VUE_APP_CMS_TOKEN
+                        'Cockpit-Token': import.meta.env.VITE_CMS_TOKEN
                     }
                 })
                 .then((res) => {

src/views/Home.vue

@@ -5,11 +5,20 @@
             <main>
                 <div class="background-apl-text">APL</div>
                 <small>Welcome To</small>
-        <img src="https://cms.aplesports.com/storage/uploads/2020/04/23/5ea178d6570e1APL_New.png" alt="APL Esports Logo">
+                <img
-        <br>
+                    src="https://cms.aplesports.com/storage/uploads/2020/04/23/5ea178d6570e1APL_New.png"
+                    alt="APL Esports Logo"
+                />
+                <br />
                 <big>APL Esports</big>
-        <p>An independent tournament organiser that combines the experience of various community figures in Asia to produce premier tournaments.</p>
+                <p>
-        <router-link :to="{ name: 'Team' }" class="btn">Our Team</router-link>
+                    An independent tournament organiser that combines the
+                    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 -->
@@ -21,25 +30,53 @@
             </div>
             <div class="grid">
                 <div class="big">
-          <router-link v-if="this.posts[0].link" :to="'news/' + this.posts[0].link">
+                    <router-link
-            <div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[0].image.path + ')' }">
+                        v-if="this.posts[0].link"
+                        :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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                <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"/>
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    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 v-else :to="'news/' + this.posts[0].title_slug">
+                    <router-link
-            <div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[0].image.path + ')' }">
+                        v-else
+                        :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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                <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"/>
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    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>
@@ -48,25 +85,59 @@
                 </div>
                 <div class="inner-grid">
                     <div class="small1">
-            <router-link v-if="this.posts[1].link" :to="'news/' + this.posts[1].link">
+                        <router-link
-              <div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[1].image.path + ')' }">
+                            v-if="this.posts[1].link"
+                            :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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                    <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"/>
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        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 v-else :to="'news/' + this.posts[1].title_slug">
+                        <router-link
-              <div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[1].image.path + ')' }">
+                            v-else
+                            :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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                    <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"/>
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        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>
@@ -74,25 +145,59 @@
                         </router-link>
                     </div>
                     <div class="small2">
-            <router-link v-if="this.posts[2].link" :to="'news/' + this.posts[2].link">
+                        <router-link
-              <div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[2].image.path + ')' }">
+                            v-if="this.posts[2].link"
+                            :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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                    <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"/>
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        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 v-else :to="'news/' + this.posts[2].title_slug">
+                        <router-link
-              <div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[2].image.path + ')' }">
+                            v-else
+                            :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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                    <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"/>
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        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>
@@ -111,13 +216,24 @@
             </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">Date: {{ this.tournaments.date }}</div>
+                        <div class="date">
-            <div class="time">Time: {{ this.tournaments.time }}</div>
+                            Date: {{ this.tournaments?.date }}
-            <div class="pool">Prizepool: {{ this.tournaments.prize }}</div>
+                        </div>
-            <a :href="this.tournaments.link" class="btn" target="_blank">Details</a>
+                        <div class="time">
+                            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>
@@ -128,10 +244,6 @@
         <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 -->
@@ -140,7 +252,7 @@
 
 <script>
 import axios from 'axios'
-import { twitter } from 'vue-twitter'
+//import { twitter } from 'vue-twitter'
 
 export default {
     name: 'Home',
@@ -149,46 +261,50 @@ export default {
             posts: {},
             tournaments: {},
             imgRoot: 'https://cms.aplesports.com/storage/uploads',
-      torRoot: 'https://cms.aplesports.com'
+            torRoot: 'https://cms.aplesports.com',
         }
     },
     created() {
-    axios.post("https://cms.aplesports.com/api/collections/get/News", {
+        axios
-      "sort": {
+            .post(
-        "_created": -1
+                'https://cms.aplesports.com/api/collections/get/News',
+                {
+                    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': process.env.VUE_APP_CMS_TOKEN
+                        'Cockpit-Token': import.meta.env.VITE_CMS_TOKEN,
+                    },
                 }
-    })
+            )
             .then((res) => {
-      this.posts = res.data.entries
+                this.posts = res.data.entries;
             })
 
-    axios.get("https://cms.aplesports.com/api/collections/get/Tournaments", {
+        axios
+            .get('https://cms.aplesports.com/api/collections/get/Tournaments', {
                 headers: {
-            'Cockpit-Token': process.env.VUE_APP_CMS_TOKEN
+                    'Cockpit-Token': import.meta.env.VITE_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

@@ -0,0 +1,22 @@
+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
+  },
+});