Improve performance

caddy/Caddyfile

@@ -24,12 +24,12 @@ localhost {
     }
 
     route /* {
-        reverse_proxy http://localhost:3000
+        file_server
     }
 
     handle_errors {
         rewrite @404 /404.html
-        reverse_proxy http://localhost:3000
+        file_server
     }
 
     route /api/* {

frontend/assets/main.css

@@ -1,3 +1,14 @@
+/* roboto-regular - latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto'), local('Roboto-Regular'),
+    url('/fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url('/fonts/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+
 .page-enter-active, .page-leave-active {
     transition: opacity .5s;
 }

frontend/components/LoginForm.vue

@@ -7,7 +7,7 @@
                     :rules="usernameRules"
                     label="Username"
                     required
-                    prepend-icon="mdi-account"
+                    :prepend-icon="mdiAccount"
                 ></v-text-field>
 
                 <v-text-field
@@ -15,7 +15,7 @@
                     :rules="passwordRules"
                     label="Password"
                     required
-                    prepend-icon="mdi-lock"
+                    :prepend-icon="mdiLock"
                     type="password"
                 ></v-text-field>
             </v-card-text>
@@ -35,9 +35,13 @@
 </template>
 
 <script>
+import { mdiLock, mdiAccount } from '@mdi/js'
+
 export default {
     name: 'LoginForm',
     data: () => ({
+        mdiLock,
+        mdiAccount,
         valid: false,
         form: {
             username: '',

frontend/components/Navbar.vue

@@ -5,7 +5,7 @@
         <v-menu bottom left>
             <template v-slot:activator="{ on }">
                 <v-btn aria-label="menu" icon v-on="on">
-                    <v-icon>mdi-dots-vertical</v-icon>
+                    <v-icon>{{ mdiDotsVertical }}</v-icon>
                 </v-btn>
             </template>
 
@@ -25,6 +25,7 @@
 </template>
 
 <script>
+import { mdiDotsVertical } from '@mdi/js'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -32,6 +33,9 @@ export default {
     computed: {
         ...mapGetters(['isAuthenticated', 'loggedInUser']),
     },
+    data: () => ({
+        mdiDotsVertical,
+    }),
     methods: {
         async logout() {
             await this.$auth.logout()

frontend/components/RegisterForm.vue

@@ -7,7 +7,7 @@
                     :rules="usernameRules"
                     label="Username"
                     required
-                    prepend-icon="mdi-account"
+                    :prepend-icon="mdiAccount"
                 ></v-text-field>
 
                 <v-text-field
@@ -15,7 +15,7 @@
                     :rules="emailRules"
                     label="Email"
                     required
-                    prepend-icon="mdi-at"
+                    :prepend-icon="mdiAt"
                 ></v-text-field>
 
                 <v-text-field
@@ -23,7 +23,7 @@
                     :rules="passwordRules"
                     label="Password"
                     required
-                    prepend-icon="mdi-lock"
+                    :prepend-icon="mdiLock"
                     type="password"
                 ></v-text-field>
 
@@ -32,7 +32,7 @@
                     :rules="confirmRules"
                     label="Confirm your password"
                     required
-                    prepend-icon="mdi-lock"
+                    :prepend-icon="mdiLock"
                     type="password"
                 ></v-text-field>
             </v-card-text>
@@ -53,9 +53,14 @@
 </template>
 
 <script>
+import { mdiLock, mdiAccount, mdiAt } from '@mdi/js'
+
 export default {
     name: 'RegisterForm',
     data: () => ({
+        mdiLock,
+        mdiAccount,
+        mdiAt,
         valid: false,
         form: {
             username: '',

frontend/nuxt.config.js

@@ -99,6 +99,7 @@ export default {
      */
     vuetify: {
         customVariables: ['~/assets/variables.scss'],
+        defaultAssets: false,
         theme: {
             dark: false,
             themes: {

frontend/package.json

@@ -19,6 +19,7 @@
     "timeago.js": "^4.0.2"
   },
   "devDependencies": {
+    "@mdi/js": "^5.1.45",
     "@nuxtjs/eslint-config": "^2.0.2",
     "@nuxtjs/eslint-module": "^1.1.0",
     "@nuxtjs/vuetify": "^1.0.0",

frontend/pages/account.vue

@@ -2,7 +2,7 @@
     <v-col cols="12" sm="8" md="6">
         <v-card color="primary" dark>
             <v-btn icon to="/" aria-label="Go back">
-                <v-icon>mdi-arrow-left</v-icon>
+                <v-icon>{{ mdiArrowLeft }}</v-icon>
             </v-btn>
             <v-card-title class="text-center justify-center py-6">
                 <h1 class="font-weight-bold display-2">Account</h1>
@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import { mdiArrowLeft } from '@mdi/js'
 import LoginForm from '~/components/LoginForm'
 import RegisterForm from '~/components/RegisterForm'
 
@@ -41,6 +42,7 @@ export default {
         RegisterForm,
     },
     data: () => ({
+        mdiArrowLeft,
         tab: 0,
         tabs: ['Login', 'Register'],
     }),

frontend/pages/notes.vue

@@ -43,7 +43,7 @@
                     class="mr-2"
                     @click="editItem(item)"
                 >
-                    mdi-eye
+                    {{ mdiEye }}
                 </v-icon>
                 <v-icon
                     aria-label="Edit Note"
@@ -53,7 +53,7 @@
                     class="mr-2"
                     @click="editItem(item)"
                 >
-                    mdi-pencil
+                    {{ mdiPencil }}}
                 </v-icon>
                 <v-icon
                     aria-label="Delete Note"
@@ -62,7 +62,7 @@
                     dark
                     @click="deleteItem(item)"
                 >
-                    mdi-delete
+                    {{ mdiDelete }}
                 </v-icon>
             </template>
             <template v-slot:no-data>
@@ -74,11 +74,15 @@
 
 <script>
 import { format } from 'timeago.js'
+import { mdiEye, mdiPencil, mdiDelete } from '@mdi/js'
 
 export default {
     name: 'Notes',
     title: 'Notes',
     data: () => ({
+        mdiEye,
+        mdiPencil,
+        mdiDelete,
         loading: true,
         notes: [],
         headers: [

frontend/yarn.lock

@@ -801,6 +801,11 @@
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
   integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
+"@mdi/js@^5.1.45":
+  version "5.1.45"
+  resolved "https://registry.yarnpkg.com/@mdi/js/-/js-5.1.45.tgz#92ac075c7080d29b430bd76ec8dc0536b800f4b0"
+  integrity sha512-44He8VMteUIWE0lIZjAIH/QoxNXbGoeqA1uwzJKwRpiaU6d5n2JjvL+11uH5nQQTJtU1nQFdKpB/j5S6rM3jtQ==
+
 "@nuxt/babel-preset-app@2.12.2":
   version "2.12.2"
   resolved "https://registry.yarnpkg.com/@nuxt/babel-preset-app/-/babel-preset-app-2.12.2.tgz#0e87c4f4f578868e74f6fa9e2a38cace5c77dac8"