fix: render changelog on website

package.json

@@ -20,6 +20,7 @@
   "devDependencies": {
     "@quasar/app": "2.0.5",
     "@quasar/icongenie": "2.3.0",
+    "@quasar/quasar-app-extension-qmarkdown": "^1.0.29",
     "@types/fs-extra": "9.0.1",
     "@types/node": "12.12.50",
     "@types/yargs": "15.0.5",

quasar.extensions.json

@@ -0,0 +1,6 @@
+{
+  "@quasar/qmarkdown": {
+    "import_md": true,
+    "import_vmd": false
+  }
+}

src/layouts/MainLayout.vue

@@ -144,6 +144,12 @@ export default {
           caption: 'Frequently asked questions',
           icon: 'help',
           link: '/faq'
+        },
+        {
+          title: 'Changelog',
+          caption: 'Look at new features and bugfixes',
+          icon: 'assignment',
+          link: '/changelog'
         }
       ],
       animeLinks: [
@@ -188,13 +194,6 @@ export default {
           caption: 'Source code for this application',
           icon: 'code',
           link: 'https://github.com/Jabster28/mirai'
-        },
-        {
-          title: 'Changelog',
-          caption: 'Look at new features and bugfixes',
-          icon: 'assignment',
-          link:
-            'https://github.com/Jabster28/mirai/blob/master/CHANGELOG.md#changelog'
         }
       ]
     };

src/pages/Changelog.vue

@@ -0,0 +1,40 @@
+<template>
+  <q-page class="row items-center justify-evenly">
+    <q-markdown :src="md" class="col-10"></q-markdown>
+  </q-page>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import axios from 'axios';
+
+export default Vue.extend({
+  name: 'PageChangelog',
+  mounted() {
+    this.$q.loading.show({
+      delay: 400 // ms
+    });
+    document.title = 'Mirai Changelog';
+    axios
+      .get(
+        'https://raw.githubusercontent.com/Jabster28/mirai/master/CHANGELOG.md'
+      )
+      .then(res => {
+        this.$q.loading.hide();
+        this.md = res.data;
+      })
+      .catch(e => {
+        this.$q.loading.hide();
+        console.log(e);
+        this.$q.notify(
+          'Hmm, something went wrong. Try again in a few moments.'
+        );
+      });
+  },
+  data() {
+    return {
+      md: ''
+    };
+  }
+});
+</script>

src/router/routes.ts

@@ -68,6 +68,11 @@ const routes: RouteConfig[] = [
     component: () => import('layouts/MainLayout.vue'),
     children: [{ path: '', component: () => import('pages/SearchManga.vue') }]
   },
+    {
+    path: '/changelog',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [{ path: '', component: () => import('pages/Changelog.vue') }]
+  },
 
   // Always leave this as last one,
   // but you can also remove it