docs: use parseMarkdown instead of transformContent

docs/components/content/ComponentCard.vue

@@ -51,7 +51,6 @@
 </template>
 
 <script setup lang="ts">
-import { transformContent } from '@nuxt/content/transformers'
 import { upperFirst, camelCase, kebabCase } from 'scule'
 import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
 
@@ -270,18 +269,19 @@ function renderObject (obj: any) {
   return obj
 }
 
-const { data: ast } = await useAsyncData(
+const { data: ast } = await useAsyncData(`${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots, code: props.code })}`, async () => {
-  `${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots, code: props.code })}`,
-  async () => {
   let formatted = ''
   try {
-      formatted = await $prettier.format(code.value) || code.value
+    formatted = await $prettier.format(code.value, {
-    } catch (error) {
+      trailingComma: 'none',
+      semi: false,
+      singleQuote: true
+    })
+  } catch {
     formatted = code.value
   }
 
-    return transformContent('content:_markdown.md', formatted, {
+  return parseMarkdown(formatted, {
-      markdown: {
     highlight: {
       highlighter,
       theme: {
@@ -290,7 +290,6 @@ const { data: ast } = await useAsyncData(
         dark: 'material-theme-palenight'
       }
     }
-      }
   })
 }, { watch: [code] })
 </script>

docs/components/content/ComponentExample.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0">
-    <div
+    <div v-if="hasPreview" class="flex border border-gray-200 dark:border-gray-700 relative rounded-t-md" :class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode, 'not-prose': !prose }, backgroundClass, extraClass]">
-      v-if="hasPreview"
-      class="flex border border-gray-200 dark:border-gray-700 relative rounded-t-md"
-      :class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode, 'not-prose': !prose }, backgroundClass, extraClass]"
-    >
       <template v-if="component">
         <iframe v-if="iframe" :src="`/examples/${component}`" v-bind="iframeProps" :class="backgroundClass" class="w-full" />
         <component :is="camelName" v-else v-bind="componentProps" :class="componentClass" />
@@ -22,7 +18,6 @@
 <script setup lang="ts">
 import { camelCase } from 'scule'
 import { fetchContentExampleCode } from '~/composables/useContentExamplesCode'
-import { transformContent } from '@nuxt/content/transformers'
 import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
 
 const props = defineProps({
@@ -86,8 +81,7 @@ const highlighter = useShikiHighlighter()
 const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))
 const hasPreview = computed(() => !props.hiddenPreview && (props.component || instance.slots.default))
 
-const { data: ast } = await useAsyncData(`content-example-${camelName}-ast`, () => transformContent('content:_markdown.md', `\`\`\`vue\n${data?.code ?? ''}\n\`\`\``, {
+const { data: ast } = await useAsyncData(`content-example-${camelName}-ast`, () => parseMarkdown(`\`\`\`vue\n${data?.code ?? ''}\n\`\`\``, {
-  markdown: {
   highlight: {
     highlighter,
     theme: {
@@ -96,6 +90,5 @@ const { data: ast } = await useAsyncData(`content-example-${camelName}-ast`, ()
       dark: 'material-theme-palenight'
     }
   }
-  }
 }))
 </script>

docs/components/content/ComponentPreset.vue

@@ -3,11 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import { transformContent } from '@nuxt/content/transformers'
 import { upperFirst, camelCase } from 'scule'
 import json5 from 'json5'
-import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
 import * as config from '#ui/ui.config'
+import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
 
 const props = defineProps({
   slug: {
@@ -18,6 +17,7 @@ const props = defineProps({
 
 const route = useRoute()
 const highlighter = useShikiHighlighter()
+
 // eslint-disable-next-line vue/no-dupe-keys
 const slug = props.slug || route.params.slug[route.params.slug.length - 1]
 const camelName = camelCase(slug)
@@ -25,12 +25,11 @@ const name = `U${upperFirst(camelName)}`
 
 const preset = config[camelName]
 
-const { data: ast } = await useAsyncData(`${name}-preset`, () => transformContent('content:_markdown.md', `
+const { data: ast } = await useAsyncData(`${name}-preset`, () => parseMarkdown(`
 \`\`\`yml
-${json5.stringify(preset, null, 2)}
+${json5.stringify(preset, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')}
 \`\`\`\
 `, {
-  markdown: {
   highlight: {
     highlighter,
     theme: {
@@ -39,6 +38,5 @@ ${json5.stringify(preset, null, 2)}
       dark: 'material-theme-palenight'
     }
   }
-  }
 }))
 </script>