@movk/nuxt-docs 1.13.0 → 1.14.0

package/app/app.config.ts

@@ -96,7 +96,7 @@ export default defineAppConfig({
     },
     icons: {
       loading: 'i-lucide-loader',
-      trigger: 'i-lucide-sparkles',
+      trigger: 'i-custom-ai',
       explain: 'i-lucide-brain',
       close: 'i-lucide-x',
       clearChat: 'i-lucide-trash-2',

package/app/assets/css/main.css

@@ -22,3 +22,19 @@
 :root {
   --ui-container: var(--container-8xl);
 }
+
+/* Shiki icon highlight transformer styles */
+.shiki-icon-highlight {
+  display: inline-block;
+  width: 1.25em;
+  height: 1.25em;
+  vertical-align: -0.25em;
+  margin-right: 0.125em;
+  background-color: var(--ui-text-highlighted);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-image: var(--shiki-icon-url);
+  mask-image: var(--shiki-icon-url);
+}

package/app/assets/icons/LICENSE

@@ -0,0 +1,14 @@
+Copyright © Nucleo
+
+Version 1.3, January 3, 2024
+
+Nucleo Icons
+
+https://nucleoapp.com/
+
+- Redistribution of icons is prohibited.
+- Icons are restricted for use only within the product they are bundled with.
+
+For more details:
+
+https://nucleoapp.com/license

package/app/assets/icons/ai.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="artificial-intelligence" aria-hidden="true" viewBox="0 0 20 20"><title>artificial-intelligence</title><g fill="currentColor"><polyline fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="10.5 15 7 5 6 5 2.5 15"/><line x1="9.586" x2="3.414" y1="12.5" y2="12.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><polyline fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="13.5 9 15.5 9 15.5 15"/><line x1="13.5" x2="17.5" y1="15" y2="15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path fill="currentColor" stroke-width="0" d="m17.6527,3.9647l-1.2005-.4503-.4506-1.2005c-.1562-.4185-.8468-.4185-1.0031,0l-.4506,1.2005-1.2005.4503c-.2086.0785-.3474.2783-.3474.5015s.1388.4231.3474.5015l1.2005.4503.4506,1.2005c.0781.2093.2783.3477.5015.3477s.4234-.1385.5015-.3477l.4506-1.2005,1.2005-.4503c.2086-.0785.3474-.2783.3474-.5015s-.1388-.4231-.3474-.5015h0Z"/></g></svg>

package/app/components/OgImage/Nuxt.vue

@@ -3,16 +3,14 @@
  * @credits NuxtLabs <https://nuxtlabs.com/>
  * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/Docs.vue
  */
-import { computed } from 'vue'
-
 const {
   title = 'title',
   description = 'description',
   headline = 'headline'
 } = defineProps<{ title?: string, description?: string, headline?: string }>()
 
-const computedTitle = computed(() => (title || '').slice(0, 60))
-const computedDescription = computed(() => (description || '').slice(0, 200))
+const computedTitle = (title || '').slice(0, 60)
+const computedDescription = (description || '').slice(0, 200)
 </script>
 
 <template>

package/app/components/content/CommitChangelog.vue

@@ -1,11 +1,27 @@
 <script setup lang="ts">
-import { camelCase, kebabCase, upperFirst } from '@movk/core'
+import { camelCase, kebabCase, upperFirst } from 'scule'
 
 interface Commit {
   sha: string
+  date: string
   message: string
 }
 
+interface Release {
+  tag_name: string
+  published_at: string
+  html_url: string
+}
+
+interface ReleaseGroup {
+  tag: string
+  url?: string
+  icon?: string
+  title: string
+  commits: Commit[]
+  published_at?: string
+}
+
 const props = defineProps<{
   /**
    * 仓库中的文件路径
@@ -45,7 +61,6 @@ const SHA_SHORT_LENGTH = 5
 const { github } = useAppConfig()
 const route = useRoute()
 
-// 计算文件路径相关的值
 const routeName = computed(() => route.path.split('/').pop() ?? '')
 const githubUrl = computed(() => (github && typeof github === 'object' ? github.url : ''))
 
@@ -55,7 +70,6 @@ const filePath = computed(() => {
   const fileExtension = props.suffix ?? (github && typeof github === 'object' ? github.suffix : 'vue')
   const fileName = props.name ?? routeName.value
 
-  // 根据 casing 参数转换文件名
   const transformedName = (() => {
     const casing = props.casing ?? (github && typeof github === 'object' ? github.casing : undefined) ?? 'auto'
 
@@ -77,43 +91,111 @@ const filePath = computed(() => {
   return `${basePath}/${filePrefix}${transformedName}.${fileExtension}`
 })
 
-const { data: commits } = await useLazyFetch<Commit[]>('/api/github/commits', {
+const { data: commits } = useLazyFetch<Commit[]>('/api/github/commits.json', {
   key: `commit-changelog-${props.name ?? routeName.value}-${props.author ?? 'all'}`,
-  query: { path: [filePath.value], author: props.author }
+  query: { path: [filePath.value], author: props.author },
+  server: false,
+  getCachedData: (key, nuxtApp) => nuxtApp.payload.data[key]
 })
 
-// 格式化提交消息
-const formattedCommits = computed(() => {
+const { data: releases } = useLazyFetch<Release[]>('/api/github/releases.json', {
+  server: false,
+  getCachedData: (key, nuxtApp) => nuxtApp.payload.data[key]
+})
+
+const groupedByRelease = computed<ReleaseGroup[]>(() => {
   if (!commits.value?.length) return []
 
-  return commits.value.map((commit) => {
-    const shortSha = commit.sha.slice(0, SHA_SHORT_LENGTH)
-    const commitLink = `[\`${shortSha}\`](${githubUrl.value}/commit/${commit.sha})`
+  const sortedReleases = (releases.value ?? [])
+    .filter(r => r.published_at)
+    .sort((a, b) => new Date(b.published_at).getTime() - new Date(a.published_at).getTime())
+
+  const releasesOldestFirst = [...sortedReleases].reverse()
+  const groups: ReleaseGroup[] = []
+  const unreleased: Commit[] = []
+
+  for (const commit of commits.value) {
+    const commitDate = new Date(commit.date).getTime()
+    const release = releasesOldestFirst.find(r => new Date(r.published_at).getTime() >= commitDate)
+
+    if (release) {
+      const majorTag = release.tag_name.replace(/-(alpha|beta|rc)\.\d+$/, '')
+      let group = groups.find(g => g.tag === majorTag)
+      if (!group) {
+        group = { tag: majorTag, title: majorTag, icon: 'i-lucide-tag', published_at: release.published_at, url: release.html_url, commits: [] }
+        groups.push(group)
+      }
+      if (new Date(release.published_at) > new Date(group.published_at!)) {
+        group.published_at = release.published_at
+        group.url = release.html_url
+      }
+      group.commits.push(commit)
+    } else {
+      unreleased.push(commit)
+    }
+  }
+
+  const result: ReleaseGroup[] = []
+  if (unreleased.length) {
+    result.push({ tag: 'unreleased', title: 'Soon', icon: 'i-lucide-tag', commits: unreleased })
+  }
 
-    const content = commit.message
-      .replace(/\(.*?\)/, '')
-      .replace(/#(\d+)/g, `<a href='${githubUrl.value}/issues/$1'>#$1</a>`)
-      .replace(/`(.*?)`/g, '<code class="text-xs">$1</code>')
+  const uniqueTags = [...new Set(sortedReleases.map(r => r.tag_name.replace(/-(alpha|beta|rc)\.\d+$/, '')))]
+  groups.sort((a, b) => uniqueTags.indexOf(a.tag) - uniqueTags.indexOf(b.tag))
+  result.push(...groups)
 
-    return {
-      sha: commit.sha,
-      formatted: `${commitLink} — ${content}`
-    }
-  })
+  return result
 })
+
+function normalizeCommitMessage(commit: Commit) {
+  const prefix = `[\`${commit.sha.slice(0, SHA_SHORT_LENGTH)}\`](${githubUrl.value}/commit/${commit.sha})`
+  const content = commit.message
+    .replace(/#(\d+)/g, `<a href='${githubUrl.value}/issues/$1'>#$1</a>`)
+    .replace(/`(.*?)`/g, '<code class="text-xs">$1</code>')
+
+  return `${prefix} — ${content}`
+}
 </script>
 
 <template>
-  <div v-if="!formattedCommits.length">
+  <div v-if="!commits?.length">
     No recent changes
   </div>
 
-  <div v-else class="flex flex-col gap-1.5 relative">
-    <div class="bg-accented w-px h-full absolute left-[11px] z-[-1]" />
-
-    <div v-for="commit of formattedCommits" :key="commit.sha" class="flex gap-1.5 items-center">
-      <div class="bg-accented ring-2 ring-bg size-1.5 mx-[8.5px] rounded-full" />
-      <MDC :value="commit.formatted" class="text-sm *:py-0 *:my-0 [&_code]:text-xs" tag="div" />
-    </div>
-  </div>
+  <UTimeline
+    v-else
+    :items="groupedByRelease"
+    size="xs"
+    :ui="{ root: '', wrapper: 'mt-0 pb-0', title: 'mb-1.5 flex items-center justify-between' }"
+  >
+    <template #title="{ item }">
+      <UBadge
+        v-if="item.tag === 'unreleased'"
+        color="neutral"
+        variant="subtle"
+        :label="item.title"
+        class="w-12.5 justify-center"
+      />
+      <NuxtLink
+        v-else
+        :to="item.url"
+        target="_blank"
+        class="hover:underline"
+      >
+        <UBadge variant="subtle" :label="item.tag" />
+      </NuxtLink>
+
+      <time v-if="item.published_at" :datetime="item.published_at" class="text-xs text-dimmed font-normal">
+        {{ useTimeAgo(new Date(item.published_at)) }}
+      </time>
+    </template>
+
+    <template #description="{ item }">
+      <ul class="flex flex-col gap-1.5">
+        <li v-for="commit of item.commits" :key="commit.sha">
+          <MDC :value="normalizeCommitMessage(commit)" class="text-sm [&_code]:text-xs" unwrap="p" />
+        </li>
+      </ul>
+    </template>
+  </UTimeline>
 </template>

package/app/components/content/ComponentEmits.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
 const route = useRoute()
 const componentName = camelCase(props.slug ?? route.path.split('/').pop() ?? '')
 
-const meta = await fetchComponentMeta(componentName as any)
+const { data: meta } = await useFetchComponentMeta(componentName as any)
 </script>
 
 <template>

package/app/components/content/ComponentExample.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { ChipProps } from '@nuxt/ui'
-import { camelCase } from 'scule'
+import { camelCase, upperFirst } from 'scule'
 import { hash } from 'ohash'
 import { useElementSize } from '@vueuse/core'
 import { get, set } from '#ui/utils'
 
-const { preview = true, source = true, prettier = false, ...props } = defineProps<{
+const props = withDefaults(defineProps<{
   name: string
   class?: any
   /**
@@ -50,6 +50,7 @@ const { preview = true, source = true, prettier = false, ...props } = defineProp
    * 链接到组件的可变属性列表
    */
   options?: Array<{
+    type?: string
     alias?: string
     name: string
     label: string
@@ -65,7 +66,21 @@ const { preview = true, source = true, prettier = false, ...props } = defineProp
    * 是否在包装器上添加 overflow-hidden
    */
   overflowHidden?: boolean
-}>()
+  /**
+   * 是否添加 background-elevated 到 wrapper
+   */
+  elevated?: boolean
+  lang?: string
+  /**
+   * 覆盖用于代码块的文件名
+   */
+  filename?: string
+}>(), {
+  preview: true,
+  source: true,
+  prettier: false,
+  lang: 'vue'
+})
 
 const slots = defineSlots<{
   options(props?: {}): any
@@ -79,7 +94,11 @@ const { width } = useElementSize(el)
 
 const camelName = camelCase(props.name)
 
-const data = await fetchComponentExample(camelName)
+const exampleModules = import.meta.glob('~/components/content/examples/**/*.vue')
+const exampleMatch = Object.entries(exampleModules).find(([path]) => path.endsWith(`/${upperFirst(camelName)}.vue`))
+const resolvedComponent = exampleMatch ? defineAsyncComponent(exampleMatch[1] as any) : undefined
+
+const { data } = await useFetchComponentExample(camelName)
 
 const componentProps = reactive({ ...(props.props || {}) })
 
@@ -87,7 +106,6 @@ const code = computed(() => {
   let code = ''
 
   if (props.collapse) {
-    // 构建 code-collapse 的属性
     const collapseAttrs = typeof props.collapse === 'object'
       ? Object.entries(props.collapse)
           .map(([key, value]) => {
@@ -104,8 +122,8 @@ const code = computed(() => {
 `
   }
 
-  code += `\`\`\`vue ${preview ? '' : ` [${data.pascalName}.vue]`}${props.highlights?.length ? `{${props.highlights.join('-')}}` : ''}
-${data?.code ?? ''}
+  code += `\`\`\`${props.lang} ${props.preview ? '' : ` [${props.filename ?? data.value?.pascalName}.${props.lang}]`}${props.highlights?.length ? `{${props.highlights.join('-')}}` : ''}
+${data.value?.code ?? ''}
 \`\`\``
 
   if (props.collapse) {
@@ -116,9 +134,9 @@ ${data?.code ?? ''}
   return code
 })
 
-const { data: ast } = await useAsyncData(`component-example-${camelName}${hash({ props: componentProps, collapse: props.collapse })}`, async () => {
-  if (!prettier) {
-    return parseMarkdown(code.value)
+const { data: ast } = useAsyncData(`component-example-${camelName}${hash({ props: componentProps, collapse: props.collapse })}`, async () => {
+  if (!props.prettier) {
+    return cachedParseMarkdown(code.value)
   }
 
   let formatted = ''
@@ -133,8 +151,8 @@ const { data: ast } = await useAsyncData(`component-example-${camelName}${hash({
     formatted = code.value
   }
 
-  return parseMarkdown(formatted)
-}, { watch: [code] })
+  return cachedParseMarkdown(formatted)
+}, { lazy: import.meta.client, watch: [code] })
 
 const optionsValues = ref(props.options?.reduce((acc, option) => {
   if (option.name) {
@@ -167,72 +185,80 @@ const urlSearchParams = computed(() => {
 <template>
   <div ref="el" class="my-5" :style="{ '--ui-header-height': '4rem' }">
     <template v-if="preview">
-      <div class="border border-muted relative z-1" :class="{ 'border-b-0 rounded-t-md': source, 'rounded-md': !source, 'overflow-hidden': props.overflowHidden }">
-        <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-muted">
-          <slot name="options" />
-
-          <UFormField
-            v-for="option in props.options"
-            :key="option.name"
-            :label="option.label"
-            :name="option.name"
-            size="sm"
-            class="inline-flex ring ring-accented rounded-sm"
-            :ui="{
-              wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
-              label: 'text-muted px-2 py-1.5',
-              container: 'mt-0'
-            }"
-          >
-            <USelectMenu
-              v-if="option.items?.length"
-              :model-value="get(optionsValues, option.name)"
-              :items="option.items"
-              :search-input="false"
-              :value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
-              color="neutral"
-              variant="soft"
-              class="rounded-sm rounded-l-none min-w-12"
-              :multiple="option.multiple"
-              :class="{ 'pl-6': option.name.toLowerCase().endsWith('color') }"
-              :ui="{ itemLeadingChip: 'w-2' }"
-              @update:model-value="set(optionsValues, option.name, $event)"
+      <div ref="wrapperContainer" class="relative group/component">
+        <div class="border border-muted relative z-1" :class="[{ 'border-b-0 rounded-t-md': props.source, 'rounded-md': !props.source, 'overflow-hidden': props.overflowHidden }]">
+          <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-muted">
+            <slot name="options" />
+
+            <UFormField
+              v-for="option in props.options"
+              :key="option.name"
+              :label="option.label"
+              :name="option.name"
+              size="sm"
+              class="inline-flex ring ring-accented rounded-sm"
+              :ui="{
+                wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
+                label: 'text-muted px-2 py-1.5',
+                container: 'mt-0'
+              }"
             >
-              <template v-if="option.name.toLowerCase().endsWith('color')" #leading="{ modelValue, ui }">
-                <UChip
-                  inset
-                  standalone
-                  :color="(modelValue as any)"
-                  :size="(ui.itemLeadingChipSize() as ChipProps['size'])"
-                  class="size-2"
-                />
-              </template>
-            </USelectMenu>
-            <UInput
-              v-else
-              :model-value="get(optionsValues, option.name)"
-              color="neutral"
-              variant="soft"
-              :ui="{ base: 'rounded-sm rounded-l-none min-w-12' }"
-              @update:model-value="set(optionsValues, option.name, $event)"
-            />
-          </UFormField>
-        </div>
+              <USelectMenu
+                v-if="option.items?.length"
+                :model-value="get(optionsValues, option.name)"
+                :items="option.items"
+                :search-input="false"
+                :value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
+                color="neutral"
+                variant="soft"
+                class="rounded-sm rounded-l-none min-w-12"
+                :multiple="option.multiple"
+                :class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
+                :ui="{ itemLeadingChip: 'w-2' }"
+                @update:model-value="set(optionsValues, option.name, $event)"
+              >
+                <template v-if="option.name.toLowerCase().endsWith('color')" #leading="{ modelValue, ui }">
+                  <UChip
+                    inset
+                    standalone
+                    :color="(modelValue as any)"
+                    :size="(ui.itemLeadingChipSize() as ChipProps['size'])"
+                    class="size-2"
+                  />
+                </template>
+              </USelectMenu>
+              <UInput
+                v-else
+                :model-value="get(optionsValues, option.name)"
+                :type="option.type"
+                color="neutral"
+                variant="soft"
+                :ui="{ base: 'rounded-sm rounded-l-none min-w-12' }"
+                @update:model-value="set(optionsValues, option.name, $event)"
+              />
+            </UFormField>
+          </div>
 
-        <iframe
-          v-if="iframe"
-          v-bind="typeof iframe === 'object' ? iframe : {}"
-          :src="`/examples/${name}?${urlSearchParams}`"
-          class="relative w-full"
-          :class="[props.class, { 'lg:left-1/2 lg:-translate-x-1/2 lg:w-[1024px]': !iframeMobile }]"
-        />
-        <div v-else class="flex justify-center p-4" :class="props.class">
-          <component :is="camelName" v-bind="{ ...componentProps, ...optionsValues }" />
+          <iframe
+            v-if="iframe"
+            v-bind="typeof iframe === 'object' ? iframe : {}"
+            :src="`/examples/${name}?${urlSearchParams}`"
+            class="relative w-full"
+            :class="[props.class, { 'dark:bg-neutral-950/50 rounded-t-md': props.elevated }, !iframeMobile && 'lg:left-1/2 lg:-translate-x-1/2 lg:w-[1024px]']"
+          />
+          <div
+            v-else-if="resolvedComponent"
+            ref="componentContainer"
+            class="flex justify-center p-4"
+            :class="[props.class, { 'dark:bg-neutral-950/50 rounded-t-md': props.elevated }]"
+          >
+            <component :is="resolvedComponent" v-bind="{ ...componentProps, ...optionsValues }" />
+          </div>
         </div>
       </div>
     </template>
 
-    <template v-if="source">
+    <template v-if="props.source">
       <div v-if="!!slots.code" class="[&_pre]:rounded-t-none! [&_div.my-5]:mt-0!">
         <slot name="code" />
       </div>

package/app/components/content/ComponentProps.vue

@@ -45,14 +45,14 @@ const { ignore = [
 const route = useRoute()
 const camelName = camelCase(slug ?? route.path.split('/').pop() ?? '')
 const componentName = prose ? `Prose${upperFirst(camelName)}` : `${upperFirst(camelName)}`
-const meta = await fetchComponentMeta(componentName as any)
+const { data: meta } = await useFetchComponentMeta(componentName as any)
 
 const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
-  if (!meta?.meta?.props?.length) {
+  if (!meta.value?.meta?.props?.length) {
     return []
   }
 
-  return meta.meta.props.filter((prop) => {
+  return meta.value.meta.props.filter((prop) => {
     return !ignore?.includes(prop.name)
   }).map((prop) => {
     if (prop.default) {

package/app/components/content/ComponentPropsSchema.vue

@@ -48,7 +48,7 @@ const schemaProps = computed(() => {
 </script>
 
 <template>
-  <ProseCollapsible v-if="schemaProps?.length" class="mt-1 mb-0">
+  <ProseCollapsible v-if="schemaProps?.length" :unmount-on-hide="true" class="mt-1 mb-0">
     <ProseUl>
       <ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
         <HighlightInlineType :type="`${schemaProp.name}${schemaProp.required === false ? '?' : ''}: ${schemaProp.type}`" />

package/app/components/content/ComponentSlots.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
 const route = useRoute()
 
 const componentName = camelCase(props.slug ?? route.path.split('/').pop() ?? '')
-const meta = await fetchComponentMeta(componentName as any)
+const { data: meta } = await useFetchComponentMeta(componentName as any)
 </script>
 
 <template>

package/app/components/content/HighlightInlineType.vue

@@ -24,7 +24,7 @@ const type = computed(() => {
 const ast = ref<any>(null)
 
 onMounted(async () => {
-  ast.value = await parseMarkdown(`\`\` ${type.value} \`\`{lang="ts-type"}`)
+  ast.value = await cachedParseMarkdown(`\`\` ${type.value} \`\`{lang="ts-type"}`)
 })
 </script>
 

package/app/components/content/PageLastCommit.vue

@@ -49,12 +49,12 @@ const filePath = computed(() => {
   return [rootDir, 'content', `${stem}.${extension}`].filter(Boolean).join('/')
 })
 
-const { data: commit } = await useFetch<LastCommit | null>('/api/github/last-commit', {
+const { data: commit } = useLazyFetch<LastCommit | null>('/api/github/last-commit.json', {
   key: `last-commit-${filePath.value}`,
   query: { path: filePath.value },
   default: () => null,
-  lazy: true,
-  server: false
+  server: false,
+  getCachedData: (key, nuxtApp) => nuxtApp.payload.data[key]
 })
 
 const commitUrl = computed(() => commit.value?.url ?? '')
@@ -81,6 +81,7 @@ const authorUrl = computed(() => {
         :src="commit.author.avatar"
         alt="Author Avatar"
         size="2xs"
+        loading="lazy"
       />
       <UBadge color="neutral" variant="outline" size="sm">
         {{ commit.author.name || commit.author.login }}
@@ -103,7 +104,7 @@ const authorUrl = computed(() => {
         v-if="commitUrl"
         :to="commitUrl"
         target="_blank"
-        class="hover:opacity-80 transition-opacity max-w-[250px]"
+        class="hover:opacity-80 transition-opacity max-w-62.5"
       >
         <UBadge
           color="neutral"
@@ -119,7 +120,7 @@ const authorUrl = computed(() => {
         color="neutral"
         variant="outline"
         size="sm"
-        class="max-w-[250px] font-mono text-xs"
+        class="max-w-62.5 font-mono text-xs"
       >
         <span class="truncate">{{ commit.message }}</span>
       </UBadge>

package/app/components/header/HeaderLogo.vue

@@ -4,6 +4,6 @@ const { header } = useAppConfig()
 
 <template>
   <NuxtLink :to="header.to">
-    <UUser :avatar="{ src: header.avatar, alt: 'Site Logo' }" :name="header.title" />
+    <UUser :avatar="{ src: header.avatar, alt: 'Site Logo', loading: 'lazy' }" :name="header.title" />
   </NuxtLink>
 </template>

package/app/composables/cachedParseMarkdown.ts

@@ -0,0 +1,12 @@
+import { markRaw } from 'vue'
+
+const _cache = new Map<string, any>()
+
+export async function cachedParseMarkdown(markdown: string) {
+  const cached = _cache.get(markdown)
+  if (cached) return cached
+
+  const result = markRaw(await parseMarkdown(markdown))
+  _cache.set(markdown, result)
+  return result
+}

package/app/composables/fetchComponentExample.ts

@@ -1,17 +1,4 @@
-const useComponentExampleState = () => useState<Record<string, any>>('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
+export function useFetchComponentExample(name: string) {
   if (import.meta.server) {
     const event = useRequestEvent()
     event?.node.res.setHeader(
@@ -20,13 +7,9 @@ export async function fetchComponentExample(name: string) {
     )
   }
 
-  // Store promise to avoid multiple calls
-  state.value[name] = $fetch(`/api/component-example/${name}.json`).then((data) => {
-    state.value[name] = data
-  }).catch(() => {
-    state.value[name] = {}
+  return useAsyncData(`component-example-${name}`, () => $fetch(`/api/component-example/${name}.json`).catch(() => ({})), {
+    lazy: import.meta.client,
+    dedupe: 'defer',
+    getCachedData: (key, nuxtApp) => nuxtApp.payload.data[key]
   })
-
-  await state.value[name]
-  return state.value[name]
 }