feat: introduced changelog page

package.json

@@ -31,6 +31,7 @@
     "portal-vue": "^2.1.3",
     "prism-themes": "^1.0.1",
     "prismjs": "^1.15.0",
+    "striptags": "^3.1.1",
     "vue": "^2.6.10",
     "vue-electron": "^1.0.6",
     "vue-prism-editor": "^0.1.2",
@@ -53,6 +54,8 @@
     "@vue/eslint-config-airbnb": "^3.0.4",
     "electron": "^3.0.13",
     "electron-icon-maker": "0.0.4",
+    "html-loader": "^0.5.5",
+    "markdown-loader": "^5.0.0",
     "move-file": "^1.0.0",
     "node-sass": "^4.12.0",
     "rimraf": "^2.6.3",

src/router/index.js

@@ -34,5 +34,10 @@ export default new Router({
       name: 'settings',
       component: () => import(/* webpackChunkName: "settings" */ '@/views/Settings.vue'),
     },
+    {
+      path: '/changelog',
+      name: 'changelog',
+      component: () => import(/* webpackChunkName: "changelog" */ '@/views/Changelog.vue'),
+    },
   ],
 });

src/views/Changelog.vue

@@ -0,0 +1,63 @@
+<template>
+  <app-content>
+    <title-bar :back-button="true">
+      <title-bar-text>
+        Changelog
+      </title-bar-text>
+    </title-bar>
+    <div
+      :class="$style.changelog"
+      v-html="$options.changelog"
+    />
+  </app-content>
+</template>
+
+<script>
+import striptags from 'striptags';
+import TitleBar from '@/components/TitleBar.vue';
+import TitleBarText from '@/components/TitleBarText.vue';
+import file from 'html-loader!markdown-loader!@/../CHANGELOG.md'; // eslint-disable-line import/no-webpack-loader-syntax
+
+let cleanFile = striptags(file, ['h1', 'h3', 'ul', 'li', 'strong']);
+cleanFile = cleanFile.replace(/\([0-9a-z]*\)/g, '');
+
+export default {
+  changelog: cleanFile,
+  components: {
+    TitleBar,
+    TitleBarText,
+  },
+};
+</script>
+
+<style lang="postcss" module>
+.changelog {
+  @apply p-6 mx-auto leading-normal;
+  max-width: 600px;
+}
+
+.changelog a {
+  color: inherit;
+}
+
+.changelog h1 {
+  @apply text-3xl font-light leading-none;
+}
+
+.changelog h1:not(:first-child) {
+  @apply mt-10;
+}
+
+.changelog h3 {
+  @apply text-lg mt-6 font-light leading-none;
+}
+
+.changelog ul {
+  @apply mt-2 text-grey-lighter list-reset;
+}
+
+.changelog strong {
+  @apply text-grey font-light;
+}
+
+</style>

src/views/Settings.vue

@@ -108,6 +108,14 @@
     >
       Show welcome page
     </router-link>
+
+    <router-link
+      :to="{ name: 'changelog' }"
+      tag="button"
+    >
+      See changelog
+    </router-link>
+
     <button
       @click="wipeAppData"
     >