53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<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, mapGetters } from 'vuex'
|
|
import renderMarkdown from '@/utils/markdown'
|
|
|
|
export default {
|
|
name: 'Note',
|
|
data: () => ({
|
|
note: {},
|
|
html: '',
|
|
}),
|
|
computed: {
|
|
...mapState('notes', ['notes', 'isInitialized']),
|
|
...mapGetters('notes', ['find']),
|
|
uuid() {
|
|
return this.$route.params.uuid
|
|
},
|
|
},
|
|
mounted() {
|
|
if (!this.isInitialized) {
|
|
this.load().then(() => {
|
|
this.note = this.find(this.uuid)
|
|
this.render()
|
|
})
|
|
} else {
|
|
this.note = this.find(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>
|