@movk/nuxt-docs 1.13.1 → 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

@@ -91,12 +91,17 @@ 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 { data: releases } = await useLazyFetch<Release[]>('/api/github/releases.json')
+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 []

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

package/app/composables/fetchComponentMeta.ts

@@ -1,19 +1,6 @@
 import type { ComponentMeta } from 'vue-component-meta'
 
-const useComponentsMetaState = () => useState<Record<string, any>>('component-meta-state', () => ({}))
-
-export async function fetchComponentMeta(name: string): Promise<{ meta: ComponentMeta }> {
-  const state = useComponentsMetaState()
-
-  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 useFetchComponentMeta(name: string) {
   if (import.meta.server) {
     const event = useRequestEvent()
     event?.node.res.setHeader(
@@ -22,13 +9,9 @@ export async function fetchComponentMeta(name: string): Promise<{ meta: Componen
     )
   }
 
-  // Store promise to avoid multiple calls
-  state.value[name] = $fetch(`/api/component-meta/${name}.json`).then((meta) => {
-    state.value[name] = meta
-  }).catch(() => {
-    state.value[name] = {}
+  return useAsyncData<{ meta: ComponentMeta }>(`component-meta-${name}`, () => $fetch(`/api/component-meta/${name}.json`).catch(() => ({}) as any), {
+    lazy: import.meta.client,
+    dedupe: 'defer',
+    getCachedData: (key, nuxtApp) => nuxtApp.payload.data[key]
   })
-
-  await state.value[name]
-  return state.value[name]
 }

package/app/mdc.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from '@nuxtjs/mdc/config'
+import { transformerColorHighlight } from 'shiki-transformer-color-highlight'
+import { transformerIconHighlight } from './utils/shiki-transformer-icon-highlight'
+
+export default defineConfig({
+  shiki: {
+    transformers: [
+      transformerColorHighlight(),
+      transformerIconHighlight()
+    ]
+  }
+})

package/app/pages/docs/[...slug].vue

@@ -104,7 +104,8 @@ useSeoMeta({
 
 defineOgImageComponent('Nuxt', {
   title,
-  description
+  description,
+  headline: breadcrumb.value?.[breadcrumb.value.length - 1]?.label || 'Movk Nuxt Docs'
 })
 </script>
 
@@ -137,7 +138,12 @@ defineOgImageComponent('Nuxt', {
           v-bind="link"
         >
           <template v-if="link.avatar" #leading>
-            <UAvatar v-bind="link.avatar" size="2xs" :alt="`${link.label} avatar`" />
+            <UAvatar
+              v-bind="link.avatar"
+              size="2xs"
+              :alt="`${link.label} avatar`"
+              loading="lazy"
+            />
           </template>
         </UButton>
         <PageHeaderLinks />

package/app/templates/releases.vue

@@ -22,8 +22,10 @@ defineOgImageComponent('Nuxt', {
 })
 
 const { data: versions } = page.value.releases
-  ? await useFetch(page.value.releases, {
+  ? useLazyFetch(page.value.releases, {
+      key: 'releases-markdown',
       server: false,
+      getCachedData: (key, nuxtApp) => nuxtApp.payload.data[key],
       transform: (data: {
         releases: {
           name?: string

package/app/types/index.d.ts

@@ -179,7 +179,7 @@ declare module 'nuxt/schema' {
         loading: string
         /**
          * AI 聊天触发按钮和滑出层头部的图标。
-         * @default 'i-lucide-sparkles'
+         * @default 'i-custom-ai'
          */
         trigger: string
         /**