Markdown compiling

frontend/pages/account.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-col cols="12" sm="8" md="6">
+    <v-col cols="12" sm="8" md="6" xl="4">
         <v-card color="secondary">
             <v-btn icon to="/" aria-label="Go back">
                 <v-icon color="white">{{ mdiArrowLeft }}</v-icon>

frontend/pages/create.vue

@@ -1,45 +1,37 @@
 <template>
-    <v-card>
-        <v-toolbar flat color="secondary" class="mt-12" dark>
-            <v-toolbar-title>Create a note</v-toolbar-title>
-        </v-toolbar>
-
-        <v-alert v-if="conflict" type="error">
-            A note with the same title already exists
-        </v-alert>
-
-        <v-form ref="form" lazy-validation>
-            <v-card-text>
-                <v-text-field
-                    v-model="form.title"
-                    label="Title"
-                    outlined
-                    value="My new note"
-                ></v-text-field>
-
-                <v-combobox
-                    v-model="form.tags"
-                    outlined
-                    :items="possibleTags"
-                    :delimiters="delimiters"
-                    label="Tags"
-                    multiple
-                    chips
-                    deletable-chips
-                ></v-combobox>
-            </v-card-text>
-
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="success" depressed @click="createNote">
-                    Create
-                </v-btn>
-            </v-card-actions>
-        </v-form>
-    </v-card>
+    <v-col cols="12">
+        <v-card color="secondary">
+            <v-card-title class="text-center justify-center py-6">
+                <h1 class="font-weight-bold headline white--text">
+                    Create a note
+                </h1>
+                <v-spacer />
+                <v-switch v-model="preview"></v-switch>
+            </v-card-title>
+            <v-card flat>
+                <v-card-text>
+                    <v-textarea
+                        v-if="!preview"
+                        v-model="text"
+                        autocapitalize="off"
+                        autocomplete="off"
+                        spellcheck="false"
+                        autocorrect="off"
+                        label="Text"
+                        auto-grow
+                    ></v-textarea>
+                    <client-only v-else>
+                        <div class="html" v-html="html" />
+                    </client-only>
+                </v-card-text>
+            </v-card>
+        </v-card>
+    </v-col>
 </template>
 
 <script>
+import markdown from '~/utils/markdown'
+
 export default {
     name: 'Create',
     data: () => ({
@@ -48,9 +40,16 @@ export default {
             title: '',
             tags: [],
         },
+        text: '',
         possibleTags: [],
         conflict: false,
+        preview: false,
     }),
+    computed: {
+        html() {
+            return markdown(this.text)
+        },
+    },
     mounted() {
         this.$axios
             .get('/tags')
@@ -81,4 +80,8 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style>
+.html h1 {
+    margin-bottom: 0.5em;
+}
+</style>