feat(pages): add releases page

components/layout/the-footer.vue

@@ -8,7 +8,7 @@
               <span>Version: {{ version }}</span>
               <span>|</span>
               <span>Commit: </span>
-              <nuxt-link to="#">
+              <nuxt-link to="releases">
                 <span> {{ commit | shortHash }}</span>
               </nuxt-link>
             </v-card-text>

nuxt.config.js

@@ -104,6 +104,7 @@ module.exports = {
     '@nuxtjs/pwa',
     // Doc: https://github.com/nuxt-community/dotenv-module
     '@nuxtjs/dotenv',
+    '@nuxtjs/markdownit',
     '@nuxtjs/vuetify',
     'nuxt-i18n',
     [

package.json

@@ -29,12 +29,14 @@
   "dependencies": {
     "@nuxtjs/axios": "5.8.0",
     "@nuxtjs/dotenv": "1.4.1",
+    "@nuxtjs/markdownit": "1.2.7",
     "@nuxtjs/pwa": "3.0.0-beta.19",
     "bootstrap": "4.4.1",
     "bootstrap-vue": "2.1.0",
     "bootswatch": "4.4.1",
     "cloudinary-core": "2.8.0",
     "cross-env": "6.0.3",
+    "github-markdown-css": "3.0.1",
     "koa": "2.11.0",
     "nuxt": "2.10.2",
     "nuxt-i18n": "6.4.1",

pages/_slug.vue

@@ -45,7 +45,8 @@ export default {
     });
   },
   validate({ params, query, store }) {
-    return params.slug !== '404.html';
+    const routeBlacklist = ['404.html'];
+    return !(params.slug in routeBlacklist);
   },
 };
 </script>

pages/releases.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="container bg-light">
+    <!-- eslint-disable-next-line -->
+    <div class="markdown-body" v-html="content()" />
+  </div>
+</template>
+
+<script>
+import 'github-markdown-css/github-markdown.css';
+
+import content from '@/CHANGELOG.md';
+
+export default {
+  methods: {
+    content() {
+      return content;
+    },
+  },
+};
+</script>
+
+<style>
+.markdown-body {
+  box-sizing: border-box;
+  min-width: 200px;
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 45px;
+
+  /* color: inherit; */
+}
+
+@media (max-width: 767px) {
+  .markdown-body {
+    padding: 15px;
+  }
+}
+</style>