feat: ✨ Version number and changelog are now displayed inside the app

package.json

@@ -37,6 +37,8 @@
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-vue": "^4.7.1",
     "file-loader": "^2.0.0",
+    "html-loader": "^0.5.5",
+    "markdown-loader": "^4.0.0",
     "node-sass": "^4.5.0",
     "replace": "^1.0.0",
     "sass-loader": "^7.1.0",
@@ -55,6 +57,7 @@
   },
   "standard-version": {
     "scripts": {
+      "postbump": "node scripts/writeVersionFile.js",
       "postchangelog": "replace  \"🐛 \" \"\" CHANGELOG.md&&replace \"✨ \" \"\" CHANGELOG.md"
     }
   }

scripts/writeVersionFile.js

@@ -0,0 +1,11 @@
+const fs = require('fs');
+const packageJson = require('../package.json');
+const version = packageJson.version;
+
+const stream = fs.createWriteStream("src/version.json");
+stream.once('open', function() {
+  stream.write('{\n');
+  stream.write(`  "version": "${version}"\n`);
+  stream.write('}\n');
+  stream.end();
+});

src/components/EditorPlaylist.vue

@@ -112,6 +112,7 @@ export default {
 
 <style lang="scss">
   .playlist {
+    width: 100%;
     max-width: 1000px;
     margin: 20px auto;
 

src/components/MainWindow.vue

@@ -9,6 +9,8 @@
 
     <editor-playlist/>
     <editor-track-adder/>
+
+    <main-window-footer/>
   </div>
 </template>
 
@@ -23,10 +25,12 @@ import EditorOperationPanel from './EditorOperationPanel.vue';
 import EditorTrackAdder from './EditorTrackAdder.vue';
 import ModalManager from './ModalManager.vue';
 import ToastMessageSystem from './ToastMessageSystem.vue';
+import MainWindowFooter from './MainWindowFooter.vue';
 
 export default {
   name: 'MainWindow',
   components: {
+    MainWindowFooter,
     ToastMessageSystem,
     ModalManager,
     EditorTrackAdder,
@@ -65,6 +69,8 @@ export default {
 
 <style lang="scss" scoped>
   .main-window {
-
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
   }
 </style>

src/components/MainWindowFooter.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="footer">
+    <b-text class="version" @click.native="openModal('changelog-modal')">v{{ version }}</b-text>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import versionFile from '../version.json';
+
+export default {
+  name: 'MainWindowFooter',
+  data() {
+    return {
+      version: versionFile.version,
+    };
+  },
+  methods: {
+    ...mapActions('app', [
+      'openModal',
+    ]),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .footer {
+    height: 30px;
+    margin-top: auto;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .version {
+    color: var(--spotify-green);
+    font-weight: bold;
+    font-size: 14px;
+    padding: 10px;
+    cursor: pointer;
+  }
+</style>

src/components/ModalManager.vue

@@ -6,6 +6,7 @@
   >
     <add-track-modal v-if="isOpen('add-track')"/>
     <select-playlist-modal v-if="isOpen('select-playlist') || !playlistExists"/>
+    <changelog-modal v-if="isOpen('changelog-modal')"/>
     <!-- add more modals here... -->
   </transition>
 </template>
@@ -14,10 +15,11 @@
 import { mapGetters, mapActions } from 'vuex';
 import AddTrackModal from './modals/AddTrackModal.vue';
 import SelectPlaylistModal from './modals/SelectPlaylistModal.vue';
+import ChangelogModal from './modals/ChangelogModal.vue';
 
 export default {
   name: 'ModalManager',
-  components: { SelectPlaylistModal, AddTrackModal },
+  components: { ChangelogModal, SelectPlaylistModal, AddTrackModal },
   computed: {
     ...mapGetters('editor', [
       'playlistImage',