docs: add playground

docs/components/mdc/MdcPlayground.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="wrapper">
+    <textarea
+      v-model="md"
+      class="w-full p-4"
+    />
+    <MDC
+      tag="article"
+      :value="md"
+      class="p-4"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const md = ref(`---
+title: Hello MDC
+---
+
+# {{ title }}
+
+Try me
+
+> Set not thy heart on any good or gain.
+> Omar Khayyam
+
+\`\`\`html
+  <MDC
+    tag="article"
+    :value="markdownContent"
+  />
+\`\`\`
+`)
+</script>
+
+<style scoped>
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr)); 
+  height: 400px; 
+  border: 1px solid;
+  overflow: hidden;
+  border-radius: 0.25rem; 
+}
+.wrapper > article {
+  overflow: scroll;
+}
+.p-4 {
+  padding: 1em;
+}
+</style>

docs/content/0.index.md

@@ -34,6 +34,9 @@ export default defineNuxtConfig({
 
 That's it, you can start writing and rendering markdown files ✨
 
+## Live Demo
+
+:mdc-playground
 
 ## Parsing Markdown
 

docs/package.json

@@ -9,13 +9,16 @@
     "preview": "nuxi preview",
     "lint": "eslint ."
   },
+  "resolutions": {
+    "@nuxt/content": "npm:@nuxt/content-edge@latest"
+  },
   "devDependencies": {
     "@nuxt-themes/docus": "^1.13.1",
     "@nuxt/devtools": "^0.6.7",
     "@nuxt/eslint-config": "^0.1.1",
     "@nuxtjs/plausible": "^0.2.1",
     "@types/node": "^20.4.0",
     "eslint": "^8.44.0",
-    "nuxt": "^3.6.2"
+    "nuxt": "^3.6.5"
   }
 }