Display notes

frontend/layouts/empty.vue

@@ -1,13 +1,3 @@
 <template>
-    <v-app>
-        <v-main>
     <nuxt />
-        </v-main>
-    </v-app>
 </template>
-
-<style>
-html {
-    overflow-y: auto;
-}
-</style>

frontend/pages/index.vue

@@ -2,18 +2,20 @@
     <div>
         <nav>
             <ul>
-                <li class="text-blue-200">
-                    <router-link class="underline" to="/signin"
-                        >Sign In</router-link
+                <li
+                    v-for="link in links"
+                    :key="link.name"
+                    class="text-blue-200"
                 >
-                </li>
-                <li class="text-blue-200">
-                    <router-link class="underline" to="/register"
-                        >Register</router-link
+                    <router-link
+                        v-if="link.url"
+                        :to="link.url"
+                        class="underline"
+                        >{{ link.name }}</router-link
                     >
-                </li>
-                <li class="text-blue-200">
-                    <button class="underline" @click="logout">Sign Out</button>
+                    <button v-else class="underline" @click="link.action">
+                        {{ link.name }}
+                    </button>
                 </li>
             </ul>
         </nav>
@@ -28,6 +30,14 @@
 <script>
 export default {
     name: 'Home',
+    data: () => ({
+        links: [
+            { url: '/signin', name: 'Sign In' },
+            { url: '/register', name: 'Register' },
+            { url: '/notes', name: 'Notes' },
+            { action: 'logout', name: 'Sign Out' },
+        ],
+    }),
     options: {
         auth: false, // FIXME: auth: 'guest'
     },

frontend/pages/notes/_uuid.vue

@@ -0,0 +1,51 @@
+<template>
+    <div>
+        <div>{{ uuid }}</div>
+        <div v-if="note">{{ note }}</div>
+        <!-- html is sanitized -->
+        <!-- eslint-disable-next-line -->
+        <div class="container mx-auto" id="note" v-html="html"></div>
+    </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import renderMarkdown from '@/utils/markdown'
+
+export default {
+    name: 'Note',
+    data: () => ({
+        note: {},
+        html: '',
+    }),
+    computed: {
+        ...mapState('notes', ['notes', 'isInitialized']),
+        uuid() {
+            return this.$route.params.uuid
+        },
+    },
+    mounted() {
+        if (!this.isInitialized) {
+            this.load().then(() => {
+                this.note = this.notes.find((e) => e.uuid === this.uuid)
+                this.render()
+            })
+        } else {
+            this.note = this.notes.find((e) => e.uuid === this.uuid)
+            this.render()
+        }
+    },
+    methods: {
+        ...mapActions('notes', ['load']),
+        render() {
+            this.html = renderMarkdown(this.note.content).contents
+        },
+    },
+}
+</script>
+
+<style>
+#note h1 {
+    @apply text-5xl font-bold;
+}
+</style>

frontend/pages/notes/index.vue

@@ -10,7 +10,9 @@
         />
         <div v-for="note in notes" :key="note.uuid">
             <div class="flex justify-between items-center">
-                <h2 class="text-lg">{{ note.title }}</h2>
+                <router-link :to="'/notes/' + note.uuid" class="text-lg">{{
+                    note.title
+                }}</router-link>
                 <div class="py-2">
                     <span
                         v-for="(tag, index) in note.tags"

frontend/store/notes.js

@@ -24,9 +24,8 @@ export const mutations = {
 }
 
 export const actions = {
-    async load({ commit }) {
-        await new Promise((resolve) => setTimeout(resolve, 600))
-        this.$axios.get('/notes').then(({ data }) => {
+    load({ commit }) {
+        return this.$axios.get('/notes').then(({ data }) => {
             commit('set', data)
             commit('setInitialized')
         })