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]
-}