feat: revised changelog integration

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /dist
 /build
+/public/changelog.html
 /public/notification.png
 
 # local env files

package.json

@@ -18,9 +18,10 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "electron:build": "npm run generate-icons && vue-cli-service electron:build",
-    "electron:serve": "vue-cli-service electron:serve",
+    "electron:build": "npm run generate-icons && npm run generate-changelog-html && vue-cli-service electron:build",
+    "electron:serve": "npm run generate-changelog-html && vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps && npm run generate-icons",
+    "generate-changelog-html": "node ./scripts/generate-changelog-html.js",
     "generate-icons": "node ./scripts/generate-icons.js"
   },
   "dependencies": {
@@ -31,7 +32,6 @@
     "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",
@@ -54,13 +54,13 @@
     "@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",
+    "marked": "^0.6.2",
     "move-file": "^1.0.0",
     "node-sass": "^4.12.0",
     "rimraf": "^2.6.3",
     "sass-loader": "^7.0.1",
     "semantic-release": "^15.13.3",
+    "striptags": "^3.1.1",
     "svg-loader": "0.0.2",
     "tailwindcss": "^0.6.6",
     "vue-cli-plugin-electron-builder": "^1.3.0",

scripts/generate-changelog-html.js

@@ -0,0 +1,20 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+const fs = require('fs');
+const marked = require('marked');
+const path = require('path');
+const striptags = require('striptags');
+
+const file = path.resolve(__dirname, '..', 'CHANGELOG.md');
+const destination = path.resolve(__dirname, '..', 'public', 'changelog.html');
+let contents = '# Changelog not found.';
+
+if (fs.existsSync(file)) {
+  contents = fs.readFileSync(file, 'utf-8');
+}
+
+let html = marked(contents);
+html = striptags(html, ['h1', 'h3', 'ul', 'li', 'strong']);
+html = html.replace(/\([0-9a-z]*\)/g, '');
+
+fs.writeFileSync(destination, html);

src/views/Changelog.vue

@@ -7,26 +7,36 @@
     </title-bar>
     <div
       :class="$style.changelog"
-      v-html="$options.changelog"
+      v-html="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,
   },
+  data() {
+    return {
+      changelog: '',
+    };
+  },
+  created() {
+    this.fetchChangelog();
+  },
+  methods: {
+    async fetchChangelog() {
+      const response = await fetch('/changelog.html');
+      const contents = await response.text();
+
+      this.changelog = contents;
+    },
+  },
 };
 </script>