feat(nuxt-mdc): extract markdown parser (#2187)

nuxt · Jul 26, 2023 · b675446 · b675446
1 parent 3e62155
commit b675446
Show file tree

Hide file tree

Showing 53 changed files with 795 additions and 3,170 deletions.
diff --git a/docs/content/4.api/3.configuration.md b/docs/content/4.api/3.configuration.md
@@ -176,7 +176,7 @@ export default defineNuxtConfig({
 })
 ```
 
-> [Here](https://github.com/nuxt/content/tree/main/src/runtime/markdown-parser/index.ts#L23) is a list of plugins @nuxt/content is using by default.
+<!-- > [Here](https://github.com/nuxt/content/tree/main/src/runtime/markdown-parser/index.ts#L23) is a list of plugins @nuxt/content is using by default. -->
 
 ::alert{type="info"}
 When adding a new plugin, make sure to install it in your dependencies.

diff --git a/package.json b/package.json
@@ -43,50 +43,32 @@
     "test:unit": "nuxi prepare test/fixtures/basic && nuxi prepare test/fixtures/document-driven && vitest run"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.6.3",
+    "@nuxt/kit": "^3.6.4",
     "consola": "^3.2.3",
     "defu": "^6.1.2",
     "destr": "^2.0.0",
-    "detab": "^3.0.2",
     "json5": "^2.2.3",
     "knitwork": "^1.0.0",
-    "listhen": "^1.1.1",
-    "mdast-util-to-hast": "^12.3.0",
+    "listhen": "^1.1.2",
     "mdurl": "^1.0.1",
+    "micromark-util-sanitize-uri": "^2.0.0",
+    "nuxt-mdc": "npm:nuxt-mdc-edge@latest",
     "ohash": "^1.1.2",
     "pathe": "^1.1.1",
-    "property-information": "^6.2.0",
-    "rehype-external-links": "^2.1.0",
-    "rehype-raw": "^6.1.1",
-    "rehype-slug": "^5.1.0",
-    "rehype-sort-attribute-values": "^4.0.0",
-    "rehype-sort-attributes": "^4.0.0",
-    "remark-emoji": "3.1.2",
-    "remark-gfm": "^3.0.1",
-    "remark-mdc": "^1.1.3",
-    "remark-parse": "^10.0.2",
-    "remark-rehype": "^10.1.0",
-    "remark-squeeze-paragraphs": "^5.0.1",
     "scule": "^1.0.0",
     "shiki-es": "^0.14.0",
     "slugify": "^1.6.6",
     "socket.io-client": "^4.7.1",
     "ufo": "^1.1.2",
-    "unified": "^10.1.2",
-    "unist-builder": "^4.0.0",
-    "unist-util-position": "^5.0.0",
-    "unist-util-stringify-position": "^4.0.0",
-    "unist-util-visit": "^5.0.0",
     "unstorage": "^1.8.0",
     "ws": "^8.13.0"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.4.0",
-    "@nuxt/schema": "3.6.3",
-    "@nuxt/test-utils": "3.6.3",
+    "@nuxt/schema": "3.6.4",
+    "@nuxt/test-utils": "3.6.4",
     "@nuxthq/studio": "^0.13.4",
     "@nuxtjs/eslint-config-typescript": "latest",
-    "@types/mdurl": "^1.0.2",
     "@types/ws": "^8.5.5",
     "c8": "^8.0.0",
     "csvtojson": "^2.0.10",
@@ -95,7 +77,7 @@
     "husky": "^8.0.3",
     "jiti": "^1.19.1",
     "lint-staged": "^13.2.3",
-    "nuxt": "3.6.3",
+    "nuxt": "3.6.4",
     "rehype-figure": "^1.0.1",
     "rehype-wrap-all": "^1.1.0",
     "release-it": "^16.1.2",

diff --git a/playground/basic/pages/test.vue b/playground/basic/pages/test.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="grid grid-cols-2 h-screen">
+    <textarea
+      v-model="md"
+      class="w-full p-4"
+    />
+    <MDC
+      v-slot="{ data, body }"
+      tag="article"
+      :value="md"
+      class="p-4"
+    >
+      <h1>{{ data?.name }}</h1>
+      <MDCRenderer
+        :body="body"
+        :data="data"
+        :prose="false"
+      />
+    </MDC>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const md = ref(`---
+name: Sam
+---
+
+# Simple
+
+Simple paragraph
+
+\`\`\`typescript
+const a = 6;
+\`\`\`
+`)
+</script>
diff --git a/playground/shared/components/Playground.vue b/playground/shared/components/Playground.vue
@@ -1,8 +1,32 @@
-<script setup>
-import { ref, useAsyncData } from '#imports'
-const PARSE_SERVER = 'http://localhost:3000/api/parse'
+<template>
+  <div class="playground">
+    <textarea v-model="content" />
+    <div class="content">
+      <div class="tabs">
+        <button
+          v-for="name in tabs"
+          :key="name"
+          class="outline"
+          :class="{ active: name === tab }"
+          @click="tab = name"
+        >
+          {{ name }}
+        </button>
+      </div>
+
+      <MDC v-slot="{ data, body }" :value="content">
+        <MDCRenderer v-if="tab === 'Preview'" :body="body" :data="data" />
+        <pre v-if="tab === 'AST'" style="padding: 1rem;">{{ body }}</pre>
+      </MDC>
+    </div>
+  </div>
+</template>
 
-const INITIAL_CODE = `---
+<script setup lang="ts">
+const tab = ref('Preview')
+const tabs = ref(['Preview', 'AST'])
+const content = ref(`
+---
 title: MDC
 cover: https://nuxtjs.org/design-kit/colored-logo.svg
 ---
@@ -33,92 +57,45 @@ This is an alert for _**{{ type }}**_
 ::alert{type="danger"}
 This is an alert for _**{{ type }}**_
 ::
-
-`
-const content = ref(INITIAL_CODE)
-
-const { data: doc, refresh } = await useAsyncData('playground', async () => {
-  try {
-    return await $fetch(PARSE_SERVER, {
-      method: 'POST',
-      cors: true,
-      body: {
-        id: 'content:_file.md',
-        content: content.value
-      }
-    })
-  } catch (e) {
-    return doc.value
-  }
-})
-
-const tab = ref('Preview')
-
-const tabs = ref(['Preview', 'AST'])
+`.trim())
 </script>
 
-<template>
-  <div class="playground">
-    <textarea v-model="content" @input="refresh" />
-    <div class="content">
-      <div class="tabs">
-        <button
-          v-for="name in tabs"
-          :key="name"
-          class="outline"
-          :class="{ active: name === tab }"
-          @click="tab = name"
-        >
-          {{ name }}
-        </button>
-      </div>
-
-      <ContentRenderer v-if="tab === 'Preview'" :value="doc">
-        <template #empty>
-          <div>Content is empty.</div>
-        </template>
-      </ContentRenderer>
-      <pre v-if="tab === 'AST'" style="padding: 1rem;">{{ doc }}</pre>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.playground {
-  display: flex;
-  align-items: stretch;
-  flex: 1;
-  height: calc(100vh - 60px);
-  max-height: calc(100vh - 60px);
-}
-
-.playground textarea {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  border-radius: 0;
-}
-
-.playground .content {
-  flex: 1;
-  width: 50%;
-  overflow-y: auto;
-  padding: 1rem;
-}
-
-.playground .tabs {
-  display: flex;
-  flex-direction: row;
-  padding: 1rem;
-  gap: 1rem;
-}
-
-.playground .tabs > button {
-  opacity: 0.75;
-}
-
-.playground .tabs > button.active {
-  border-width: 2px;
-  opacity: 1;
-}
-</style>
+ <style scoped>
+ .playground {
+   display: flex;
+   align-items: stretch;
+   flex: 1;
+   height: calc(100vh - 60px);
+   max-height: calc(100vh - 60px);
+ }
+
+ .playground textarea {
+   flex: 1;
+   width: 100%;
+   height: 100%;
+   border-radius: 0;
+ }
+
+ .playground .content {
+   flex: 1;
+   width: 50%;
+   overflow-y: auto;
+   padding: 1rem;
+ }
+
+ .playground .tabs {
+   display: flex;
+   flex-direction: row;
+   padding: 1rem;
+   gap: 1rem;
+ }
+
+ .playground .tabs > button {
+   opacity: 0.75;
+ }
+
+ .playground .tabs > button.active {
+   border-width: 2px;
+   opacity: 1;
+ }
+ </style>
diff --git a/playground/shared/server/api/parse.ts b/playground/shared/server/api/parse.ts