Added markdown preview

components/card/MarkdownRenderer.client.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+	interface Props {
+		content: string
+	}
+
+	const props = defineProps<Props>()
+	const parsedMarkdown = stringToMarkdown(props.content)
+</script>
+
+<template>
+	<div class="h-content bg-secondary overflow-y-scroll p-4">
+		<div
+			class="prose prose-invert overflow-scroll"
+			v-html="parsedMarkdown">
+		</div>
+	</div>
+</template>

composables/markdown.ts

@@ -0,0 +1,12 @@
+import { micromark } from 'micromark'
+import { gfm, gfmHtml } from 'micromark-extension-gfm'
+
+const stringToMarkdown = (string: string) => {
+	const parsedMarkdown = micromark(string, {
+		extensions: [gfm()],
+		htmlExtensions: [gfmHtml()],
+	})
+	return parsedMarkdown
+}
+
+export { stringToMarkdown }

nuxt.config.ts

@@ -30,7 +30,23 @@ export default defineNuxtConfig({
 						lightgray: '#27272a',
 					},
 				},
-			},
+				// uncomment when syntax highlight
+				// is enable for markdown (highlight.js)
+				// typography: {
+				// 	default: {
+				// 		css: {
+				// 			'pre': null,
+				// 			'code': null,
+				// 			'code::before': null,
+				// 			'code::after': null,
+				// 			'pre code': null,
+				// 			'pre code::before': null,
+				// 			'pre code::after': null,
+				// 		},
+				// 	},
+				// },
+			},
+			plugins: [require('@tailwindcss/typography')],
 		},
 	},
 	typescript: {

package.json

@@ -8,9 +8,11 @@
 		"postinstall": "nuxt prepare"
 	},
 	"devDependencies": {
+		"@nuxt/content": "^2.4.3",
 		"@nuxt/devtools": "^0.1.4",
 		"@nuxtjs/supabase": "^0.3.0",
 		"@nuxtjs/tailwindcss": "^6.2.0",
+		"@tailwindcss/typography": "^0.5.9",
 		"@vueuse/core": "^9.12.0",
 		"@vueuse/nuxt": "^9.12.0",
 		"nuxt": "^3.2.0",
@@ -21,6 +23,8 @@
 	"dependencies": {
 		"@formkit/auto-animate": "^1.0.0-beta.6",
 		"@pinia/nuxt": "^0.4.6",
+		"micromark": "^3.1.0",
+		"micromark-extension-gfm": "^2.0.1",
 		"pinia": "^2.0.29"
 	},
 	"overrides": {

pages/notes/[id].vue

@@ -1,11 +1,5 @@
 <template>
 	<App class="p-4">
-		<ElementTextArea
-			@keydown.ctrl.s.prevent="submit(note)"
-			v-model="note.title"
-			placeholder="untitled"
-			rows="1"
-			class="text-center" />
 		<div class="flex w-full max-w-2xl justify-end gap-4">
 			<ElementButton
 				class="hover:bg-blue-500 hover:text-black"
@@ -28,10 +22,30 @@
 					name="fa6-solid:trash" />
 			</ElementButton>
 		</div>
-		<ElementTextArea
-			@keydown.ctrl.s.prevent="submit(note)"
-			v-model:model-value="note.description"
-			class="h-full p-4" />
+		<div class="h-full w-full max-w-2xl">
+			<div class="flex w-full justify-between">
+				<div
+					@click="toggleComp('text')"
+					class="bg-lightgray w-1/2 p-2 text-center text-xl"
+					:class="{ 'bg-secondary': comp === 'text' }">
+					Text
+				</div>
+				<div
+					@click="toggleComp('md')"
+					class="bg-lightgray w-1/2 p-2 text-center text-xl"
+					:class="{ 'bg-secondary': comp === 'md' }">
+					Markdown
+				</div>
+			</div>
+			<textarea
+				v-if="comp === 'text'"
+				class="bg-secondary w-full resize-none border-none p-4 outline-none placeholder:text-zinc-700 focus:outline-none"
+				v-model="note.description">
+			</textarea>
+			<CardMarkdownRenderer
+				v-if="comp === 'md'"
+				:content="note.description" />
+		</div>
 	</App>
 </template>
 
@@ -40,6 +54,8 @@
 		middleware: ['auth'],
 	})
 
+	type Comp = 'text' | 'md'
+
 	const note = reactive<Note>({
 		title: '',
 		description: '',
@@ -49,6 +65,11 @@
 	const isLoading = ref<Boolean>(false)
 	const isSubmitting = ref<Boolean>(false)
 	const isDeleting = ref<Boolean>(false)
+	const comp = ref<Comp>('text')
+
+	const toggleComp = (name: Comp) => {
+		comp.value = name
+	}
 
 	const { refresh } = await useFetch('/api/note', {
 		method: 'GET',