Move to using vue-cli-service instead of parcel (2.1MB to 850KB)

src/nginxconfig/build/template.js

@@ -0,0 +1,14 @@
+const path = require('path');
+const fs = require('fs');
+
+// Fetch the posthtml template and convert it to an ejs template
+const main = () => {
+    const buildDir = path.join(__dirname, '..', '..', '..', 'build');
+    let template = fs.readFileSync(path.join(buildDir, 'base.html'), 'utf8');
+    template = template.replace('<block name="title"></block>', 'NGINXConfig | ');
+    template = template.replace('<block name="head"></block>', '');
+    template = template.replace('<block name="content"></block>', '<div id="app"></div>');
+    fs.writeFileSync(path.join(buildDir, 'index.html'), template);
+};
+
+main();

src/nginxconfig/index.html

@@ -1,27 +0,0 @@
-<!--
-Copyright 2020 DigitalOcean
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-<extends src="../build/base.html">
-    <block name="title">NGINXConfig | </block>
-    <block name="head">
-        <link rel="stylesheet" href="scss/style.scss">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />
-    </block>
-    <block name="content">
-        <div id="app"></div>
-        <script src="mount.js"></script>
-    </block>
-</extends>

src/nginxconfig/mount.js

@@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import 'babel-polyfill';
-
+import './scss/style.scss';
 import Vue from 'vue';
 import './util/prism_bundle';
 import App from './templates/app';

src/nginxconfig/scss/style.scss

@@ -31,8 +31,6 @@ $highlight: #f2c94c;
   $vs-state-active-bg: $primary;
   @import "~vue-select/src/scss/vue-select";
 
-  @import "~prismjs/plugins/toolbar/prism-toolbar.css";
-
   @import "tabs";
   @import "panel";
   @import "fields";

src/nginxconfig/templates/app.vue

@@ -86,11 +86,11 @@ limitations under the License.
 </template>
 
 <script>
-    import crypto from 'crypto';
     import clone from 'clone';
     import { diffLines } from 'diff';
     import escape from 'escape-html';
     import deepEqual from 'deep-equal';
+    import createHash from 'create-hash';
     import Header from 'do-vue/src/templates/header';
     import Footer from 'do-vue/src/templates/footer';
     import isChanged from '../util/is_changed';
@@ -175,7 +175,7 @@ limitations under the License.
                 if (this.$data.active === index) this.$data.active = this.$data.domains.findIndex(d => d !== null);
             },
             hash(content) {
-                return crypto.createHash('sha256').update(content).digest('base64');
+                return createHash('sha256').update(content).digest('base64');
             },
             checkChange(oldConf) {
                 // If nothing has changed for a tick, we can use the config files

src/nginxconfig/templates/setup.vue

@@ -52,7 +52,7 @@ limitations under the License.
 
 <script>
     import { pack } from 'tar-stream';
-    import getRawBody from 'raw-body';
+    import getStream from 'get-stream';
     import { gzip } from 'node-gzip';
     import copy from 'copy-to-clipboard';
     import * as Sections from './setup_sections';
@@ -116,7 +116,7 @@ limitations under the License.
 
                 // Convert the tar to a buffer and gzip it
                 tar.finalize();
-                const raw = await getRawBody(tar);
+                const raw = await getStream.buffer(tar);
                 return gzip(raw);
             },
             async downloadTar() {

src/nginxconfig/util/prism_bundle.js

@@ -3,4 +3,5 @@ import 'prismjs/components/prism-nginx';
 import 'prismjs/components/prism-bash';
 import 'prismjs/plugins/keep-markup/prism-keep-markup';
 import 'prismjs/plugins/toolbar/prism-toolbar';
+import 'prismjs/plugins/toolbar/prism-toolbar.css';
 import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';