docs(ComponentExample): add

docs/app/components/content/ComponentCode.vue

@@ -101,7 +101,7 @@ const code = computed(() => {
   return code
 })
 
-const { data: ast } = await useAsyncData(`${name}-code-${JSON.stringify({ props: componentProps, slots: props.slots })}`, async () => {
+const { data: ast } = await useAsyncData(`component-code-${name}-${JSON.stringify({ props: componentProps, slots: props.slots })}`, async () => {
   let formatted = ''
   try {
     formatted = await $prettier.format(code.value)

docs/app/components/content/ComponentExample.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { camelCase } from 'scule'
+
+const props = defineProps<{
+  name: string
+  props?: { [key: string]: any }
+}>()
+
+const camelName = camelCase(props.name)
+
+const data = await fetchComponentExample(camelName)
+
+const componentProps = reactive({ ...(props.props || {}) })
+
+const { data: ast } = await useAsyncData(`component-example-${camelName}`, () => parseMarkdown(`\`\`\`vue\n${data?.code ?? ''}\n\`\`\``))
+</script>
+
+<template>
+  <div>
+    <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4 rounded-t-md">
+      <component :is="camelName" v-bind="componentProps" />
+    </div>
+  </div>
+
+  <MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" class="[&>div>pre]:!rounded-t-none [&>div]:!mt-0" />
+</template>

docs/app/components/content/ComponentTheme.vue

@@ -33,7 +33,7 @@ const component = computed(() => {
   return stripCompoundVariants(component)
 })
 
-const { data: ast } = await useAsyncData(`${name}-theme`, () => parseMarkdown(`
+const { data: ast } = await useAsyncData(`component-theme-${name}`, () => parseMarkdown(`
 \`\`\`yml
 ${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')}
 \`\`\`\

docs/app/components/content/HighlightInlineType.vue

@@ -14,7 +14,7 @@ const type = computed(() => {
   return props.type
 })
 
-const { data: ast } = await useAsyncData(`hightlight-inline-code-` + props.type, () => parseMarkdown(`\`${type.value}\`{lang="ts-type"}`))
+const { data: ast } = await useAsyncData(`hightlight-inline-code-${props.type}`, () => parseMarkdown(`\`${type.value}\`{lang="ts-type"}`))
 </script>
 
 <template>

docs/app/composables/fetchComponentExample.ts

@@ -0,0 +1,28 @@
+const useComponentExampleState = () => useState('component-example-state', () => ({}))
+
+export async function fetchComponentExample(name: string) {
+  const state = useComponentExampleState()
+
+  if (state.value[name]?.then) {
+    await state.value[name]
+    return state.value[name]
+  }
+  if (state.value[name]) {
+    return state.value[name]
+  }
+
+  // add to nitro prerender
+  if (import.meta.server) {
+    const event = useRequestEvent()
+    event.node.res.setHeader(
+      'x-nitro-prerender',
+      [event.node.res.getHeader('x-nitro-prerender'), `/api/component-example/${name}.json`].filter(Boolean).join(',')
+    )
+  }
+  state.value[name] = $fetch(`/api/component-example/${name}.json`).then((data) => {
+    state.value[name] = data
+  })
+
+  await state.value[name]
+  return state.value[name]
+}

docs/app/composables/fetchComponentMeta.ts

@@ -1,6 +1,6 @@
 import type { ComponentMeta } from 'vue-component-meta'
 
-const useComponentsMetaState = () => useState('components-meta', () => ({}))
+const useComponentsMetaState = () => useState('component-meta-state', () => ({}))
 
 export async function fetchComponentMeta(name: string): Promise<{ meta: ComponentMeta }> {
   const state = useComponentsMetaState()

docs/app/composables/fetchContentExamplesCode.ts

@@ -1,29 +0,0 @@
-const useContentExamplesCodeState = () => useState('content-examples-code', () => ({}))
-
-export async function fetchContentExampleCode(name?: string) {
-  if (!name) return
-  const state = useContentExamplesCodeState()
-
-  if (state.value[name]?.then) {
-    await state.value[name]
-    return state.value[name]
-  }
-  if (state.value[name]) {
-    return state.value[name]
-  }
-
-  // add to nitro prerender
-  if (import.meta.server) {
-    const event = useRequestEvent()
-    event.node.res.setHeader(
-      'x-nitro-prerender',
-      [event.node.res.getHeader('x-nitro-prerender'), `/api/content-examples-code/${name}.json`].filter(Boolean).join(',')
-    )
-  }
-  state.value[name] = $fetch(`/api/content-examples-code/${name}.json`).then((data) => {
-    state.value[name] = data
-  })
-
-  await state.value[name]
-  return state.value[name]
-}

docs/modules/component-example.ts

@@ -5,13 +5,13 @@ import { defineNuxtModule, addTemplate, addServerHandler, createResolver } from
 
 export default defineNuxtModule({
   meta: {
-    name: 'content-examples-code'
+    name: 'component-example'
   },
   async setup(_options, nuxt) {
     const resolver = createResolver(import.meta.url)
     let _configResolved: any
     let components: Record<string, any>
-    const outputPath = join(nuxt.options.buildDir, 'content-examples-code')
+    const outputPath = join(nuxt.options.buildDir, 'component-example')
 
     async function stubOutput() {
       if (existsSync(outputPath + '.mjs')) {
@@ -77,7 +77,7 @@ export default defineNuxtModule({
     })
 
     addTemplate({
-      filename: 'content-examples-code.mjs',
+      filename: 'component-example.mjs',
       getContents: () => 'export default {}',
       write: true
     })
@@ -85,7 +85,7 @@ export default defineNuxtModule({
     nuxt.hook('vite:extend', (vite: any) => {
       vite.config.plugins = vite.config.plugins || []
       vite.config.plugins.push({
-        name: 'content-examples-code',
+        name: 'component-example',
         enforce: 'post',
         async buildStart() {
           if (_configResolved?.build.ssr) {
@@ -112,17 +112,17 @@ export default defineNuxtModule({
 
     nuxt.hook('nitro:config', (nitroConfig) => {
       nitroConfig.virtual = nitroConfig.virtual || {}
-      nitroConfig.virtual['#content-examples-code/nitro'] = () =>
+      nitroConfig.virtual['#component-example/nitro'] = () =>
         readFileSync(
-          join(nuxt.options.buildDir, '/content-examples-code.mjs'),
+          join(nuxt.options.buildDir, '/component-example.mjs'),
           'utf-8'
         )
     })
 
     addServerHandler({
       method: 'get',
-      route: '/api/content-examples-code/:component?',
-      handler: resolver.resolve('../server/api/content-examples-code.get')
+      route: '/api/component-example/:component?',
+      handler: resolver.resolve('../server/api/component-example.get')
     })
   }
 })

docs/nuxt.config.ts

@@ -25,7 +25,6 @@ export default defineNuxtConfig({
     '@nuxt/image',
     '@nuxtjs/plausible',
     '@vueuse/nuxt',
-    // 'modules/content-examples-code'
     'nuxt-component-meta',
     'nuxt-og-image'
   ],

docs/server/api/component-example.get.ts

@@ -1,7 +1,7 @@
 import { defineEventHandler, createError, appendHeader } from 'h3'
 import { pascalCase } from 'scule'
 // @ts-expect-error - no types available
-import components from '#content-examples-code/nitro'
+import components from '#component-example/nitro'
 
 export default defineEventHandler((event) => {
   appendHeader(event, 'Access-Control-Allow-Origin', '*')
@@ -10,7 +10,7 @@ export default defineEventHandler((event) => {
     const component = components[pascalCase(componentName)]
     if (!component) {
       throw createError({
-        statusMessage: 'Examples not found!',
+        statusMessage: 'Example not found!',
         statusCode: 404
       })
     }