Initial commit

frontend/src/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-app>
+    <v-container class="text-center">
+      <h1>Minify API</h1>
+    </v-container>
+
+    <v-main>
+      <MinifierEditor/>
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+import MinifierEditor from './components/MinifierEditor';
+
+export default {
+  name: 'App',
+
+  components: {
+    MinifierEditor,
+  },
+
+  data: () => ({
+    //
+  }),
+};
+</script>

frontend/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>

frontend/src/components/MinifierEditor.vue

@@ -0,0 +1,78 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <v-select block
+                  v-model="language"
+            :items="languages"
+            label="Language"
+                  item-value="mime"
+                  item-text="name"
+            dense
+        ></v-select>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <codemirror v-model="code" :options="cmOptions" />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <v-btn v-on:click="minify" block>
+          Minify
+        </v-btn>
+      </v-col>
+    </v-row>
+    <v-row class="text-center">
+      <v-col cols="12">
+        <v-container fluid>
+          <v-textarea
+              label="Minified"
+              v-model="minified"
+          ></v-textarea>
+        </v-container>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+  import axios from "axios";
+
+  export default {
+    name: 'MinifierEditor',
+    data () {
+      return {
+        code: '',
+        minified: '',
+        language: 'text/javascript',
+        languages: [
+          { mime: 'text/html', name: 'HTML' },
+          { mime: 'text/css', name: 'CSS' },
+          { mime: 'text/javascript', name: 'JavaScript' },
+          { mime: 'application/json', name: 'JSON' },
+          { mime: 'text/xml', name: 'XML' },
+        ],
+        cmOptions: {
+          // codemirror options
+          tabSize: 4,
+          mode: this.language,
+          lineNumbers: true,
+          line: true,
+        }
+      }
+    },
+    methods: {
+      async minify() {
+        const {data} = await axios.post('http://localhost:3000/api', this.code, {
+          headers: {
+            'Content-Type': this.language
+          }
+        });
+
+        this.minified = data;
+      }
+    },
+  }
+</script>

frontend/src/main.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import App from './App.vue'
+import vuetify from './plugins/vuetify'
+import VueCodemirror from 'vue-codemirror';
+
+Vue.config.productionTip = false
+
+import 'codemirror/lib/codemirror.css';
+
+Vue.use(VueCodemirror);
+
+new Vue({
+  vuetify,
+  render: h => h(App)
+}).$mount('#app')

frontend/src/plugins/vuetify.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib/framework';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+});