Display notes

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

@@ -0,0 +1,44 @@
+<template>
+    <div class="container p-4 mx-auto bg-gray-700">
+        <h1 class="text-center">My Notes</h1>
+        <input
+            id="search"
+            name="search"
+            class="block p-2 my-2 appearance-none w-full bg-transparent border-white-200 border-b focus:border-red-500"
+            placeholder="search"
+            aria-label="search"
+        />
+        <div v-for="note in notes" :key="note.uuid">
+            <div class="flex justify-between items-center">
+                <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"
+                        :key="index"
+                        class="inline-block text-sm bg-gray-500 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 ml-2"
+                        >{{ tag }}</span
+                    >
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+
+export default {
+    name: 'Notes',
+    computed: {
+        ...mapState('notes', ['notes', 'isInitialized']),
+    },
+    mounted() {
+        this.load()
+    },
+    methods: {
+        ...mapActions('notes', ['load']),
+    },
+}
+</script>