@movk/nuxt-docs 1.5.2 → 1.6.0

package/app/components/footer/Footer.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const route = useRoute()
+</script>
+
+<template>
+  <USeparator :icon="route.path === '/' ? undefined : 'i-simple-icons-nuxtdotjs'" class="h-px" />
+
+  <UFooter
+    :ui="{
+      left: 'text-sm text-muted',
+      root: 'border-t border-default'
+    }"
+  >
+    <template #left>
+      <FooterLeft />
+    </template>
+
+    <template #right>
+      <FooterRight />
+    </template>
+  </UFooter>
+</template>

package/app/components/footer/FooterLeft.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+const { footer } = useAppConfig()
+</script>
+
+<template>
+  <MDC v-if="footer?.credits" :value="footer.credits" unwrap="p" />
+</template>

package/app/components/footer/FooterRight.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+const { footer } = useAppConfig()
+</script>
+
+<template>
+  <UTooltip
+    v-for="(link, count) in footer.socials"
+    :key="count"
+    :text="link.label || (link as any)['aria-label']"
+    class="hidden lg:flex"
+  >
+    <UButton v-bind="{ color: 'neutral', variant: 'ghost', ...link }" />
+  </UTooltip>
+</template>

package/app/components/header/Header.vue

@@ -2,7 +2,6 @@
 import type { ButtonProps } from '@nuxt/ui'
 
 const route = useRoute()
-const { desktopLinks } = useHeader()
 const { header, github } = useAppConfig()
 
 const links = computed<ButtonProps[]>(() => github && github.url
@@ -24,9 +23,11 @@ const links = computed<ButtonProps[]>(() => github && github.url
       <HeaderLogo />
     </template>
 
-    <UNavigationMenu :items="desktopLinks" variant="link" />
+    <HeaderCenter />
 
     <template #right>
+      <HeaderCTA />
+
       <ThemePicker />
 
       <UTooltip text="Search" :kbds="['meta', 'K']">
@@ -50,11 +51,7 @@ const links = computed<ButtonProps[]>(() => github && github.url
     </template>
 
     <template #toggle="{ open, toggle, ui }">
-      <HeaderToggleButton
-        :open="open"
-        :class="ui.toggle({ toggleSide: 'right' })"
-        @click="toggle"
-      />
+      <HeaderToggleButton :open="open" :class="ui.toggle({ toggleSide: 'right' })" @click="toggle" />
     </template>
 
     <template #body>

package/app/components/header/HeaderCTA.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+const { aiChat } = useRuntimeConfig().public
+const route = useRoute()
+</script>
+
+<template>
+  <div v-if="aiChat.enable" class="hidden md:block">
+    <UButton
+      v-if="route.path === '/'"
+      to="/docs"
+      label="Get Started"
+      variant="ghost"
+      trailing
+      icon="i-lucide-arrow-right"
+    />
+    <AiChat v-else />
+  </div>
+</template>

package/app/components/header/HeaderCenter.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+const { desktopLinks } = useHeader()
+</script>
+
+<template>
+  <UNavigationMenu :items="desktopLinks" variant="link" />
+</template>

package/app/components/theme-picker/ThemePicker.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
-import { omit } from '@movk/core'
-import colors from 'tailwindcss/colors'
 import { useClipboard } from '@vueuse/core'
-import { themeIcons } from '../../utils/theme'
 
 const appConfig = useAppConfig()
 const colorMode = useColorMode()
-const site = useSiteConfig()
 
 const { track } = useAnalytics()
 
@@ -21,199 +17,26 @@ watch(open, (isOpen) => {
 const { copy: copyCSS, copied: copiedCSS } = useClipboard()
 const { copy: copyAppConfig, copied: copiedAppConfig } = useClipboard()
 
-const neutralColors = ['slate', 'gray', 'zinc', 'neutral', 'stone']
-const neutral = computed({
-  get() {
-    return appConfig.ui.colors.neutral
-  },
-  set(option) {
-    appConfig.ui.colors.neutral = option
-    window.localStorage.setItem(`${site.name}-ui-neutral`, appConfig.ui.colors.neutral)
-    if (appConfig.vercelAnalytics?.debug) track('Theme Changed', { setting: 'neutral', value: option })
-  }
-})
-
-const colorsToOmit = ['inherit', 'current', 'transparent', 'black', 'white', ...neutralColors]
-const primaryColors = Object.keys(omit(colors, colorsToOmit as any))
-const primary = computed({
-  get() {
-    return appConfig.ui.colors.primary
-  },
-  set(option) {
-    appConfig.ui.colors.primary = option
-    window.localStorage.setItem(`${site.name}-ui-primary`, appConfig.ui.colors.primary)
-    setBlackAsPrimary(false)
-    if (appConfig.vercelAnalytics?.debug) track('Theme Changed', { setting: 'primary', value: option })
-  }
-})
-
-const radiuses = [0, 0.125, 0.25, 0.375, 0.5]
-const radius = computed({
-  get() {
-    return appConfig.theme.radius
-  },
-  set(option) {
-    appConfig.theme.radius = option
-    window.localStorage.setItem(`${site.name}-ui-radius`, String(appConfig.theme.radius))
-    if (appConfig.vercelAnalytics?.debug) track('Theme Changed', { setting: 'radius', value: option })
-  }
-})
-
-const modes = [
-  { label: 'light', icon: 'i-lucide-sun' },
-  { label: 'dark', icon: 'i-lucide-moon' },
-  { label: 'system', icon: 'i-lucide-monitor' }
-]
-const mode = computed({
-  get() {
-    return colorMode.value
-  },
-  set(option) {
-    colorMode.preference = option
-    if (appConfig.vercelAnalytics?.debug) track('Theme Changed', { setting: 'color mode', value: option })
-  }
-})
-
-function setBlackAsPrimary(value: boolean) {
-  appConfig.theme.blackAsPrimary = value
-  window.localStorage.setItem(`${site.name}-ui-black-as-primary`, String(value))
-  if (appConfig.vercelAnalytics?.debug) track('Theme Changed', { setting: 'black as primary', value })
-}
-
-const fonts = ['Public Sans', 'DM Sans', 'Geist', 'Inter', 'Poppins', 'Outfit', 'Raleway']
-const font = computed({
-  get() {
-    return appConfig.theme.font
-  },
-  set(option) {
-    appConfig.theme.font = option
-    window.localStorage.setItem(`${site.name}-ui-font`, appConfig.theme.font)
-    if (appConfig.vercelAnalytics?.debug) track('Theme Changed', { setting: 'font', value: option })
-  }
-})
-
-const icons = [{
-  label: 'Lucide',
-  icon: 'i-lucide-feather',
-  value: 'lucide'
-}, {
-  label: 'Phosphor',
-  icon: 'i-ph-phosphor-logo',
-  value: 'phosphor'
-}, {
-  label: 'Tabler',
-  icon: 'i-tabler-brand-tabler',
-  value: 'tabler'
-}]
-const icon = computed({
-  get() {
-    return appConfig.theme.icons
-  },
-  set(option) {
-    appConfig.theme.icons = option
-    appConfig.ui.icons = themeIcons[option as keyof typeof themeIcons] as any
-    window.localStorage.setItem(`${site.name}-ui-icons`, appConfig.theme.icons)
-    if (appConfig.vercelAnalytics?.debug) track('Theme Changed', { setting: 'icons', value: option })
-  }
-})
-
-const hasCSSChanges = computed(() => {
-  return appConfig.theme.radius !== 0.25
-    || appConfig.theme.blackAsPrimary
-    || appConfig.theme.font !== 'Public Sans'
-})
-
-const hasAppConfigChanges = computed(() => {
-  return appConfig.ui.colors.primary !== 'green'
-    || appConfig.ui.colors.neutral !== 'slate'
-    || appConfig.theme.icons !== 'lucide'
-})
-
-function exportCSS() {
-  if (appConfig.vercelAnalytics?.debug) track('Theme Exported', { type: 'css' })
-
-  const lines = [
-    '@import "tailwindcss";',
-    '@import "@nuxt/ui";'
-  ]
-
-  if (appConfig.theme.font !== 'Public Sans') {
-    lines.push('', '@theme {', `  --font-sans: '${appConfig.theme.font}', sans-serif;`, '}')
-  }
-
-  const rootLines: string[] = []
-  if (appConfig.theme.radius !== 0.25) {
-    rootLines.push(`  --ui-radius: ${appConfig.theme.radius}rem;`)
-  }
-  if (appConfig.theme.blackAsPrimary) {
-    rootLines.push('  --ui-primary: black;')
-  }
-
-  if (rootLines.length) {
-    lines.push('', ':root {', ...rootLines, '}')
-  }
-
-  if (appConfig.theme.blackAsPrimary) {
-    lines.push('', '.dark {', '  --ui-primary: white;', '}')
-  }
-
-  copyCSS(lines.join('\n'))
-}
-
-function exportAppConfig() {
-  if (appConfig.vercelAnalytics?.debug) track('Theme Exported', { type: 'appConfig' })
-
-  const config: Record<string, any> = {}
-
-  if (appConfig.ui.colors.primary !== 'green' || appConfig.ui.colors.neutral !== 'slate') {
-    config.ui = { colors: {} }
-    if (appConfig.ui.colors.primary !== 'green') {
-      config.ui.colors.primary = appConfig.ui.colors.primary
-    }
-    if (appConfig.ui.colors.neutral !== 'slate') {
-      config.ui.colors.neutral = appConfig.ui.colors.neutral
-    }
-  }
-
-  if (appConfig.theme.icons !== 'lucide') {
-    const iconSet = appConfig.theme.icons
-    const icons = themeIcons[iconSet as keyof typeof themeIcons]
-    config.ui = config.ui || {}
-    config.ui.icons = icons
-  }
-
-  const configString = JSON.stringify(config, null, 2)
-    .replace(/"([^"]+)":/g, '$1:')
-    .replace(/"/g, '\'')
-
-  const output = `export default defineAppConfig(${configString})`
-
-  copyAppConfig(output)
-}
-
-function resetTheme() {
-  if (appConfig.vercelAnalytics?.debug) track('Theme Reset')
-
-  // Reset without triggering individual tracking events
-  appConfig.ui.colors.primary = 'green'
-  window.localStorage.removeItem(`${site.name}-ui-primary`)
-
-  appConfig.ui.colors.neutral = 'slate'
-  window.localStorage.removeItem(`${site.name}-ui-neutral`)
-
-  appConfig.theme.radius = 0.25
-  window.localStorage.removeItem(`${site.name}-ui-radius`)
-
-  appConfig.theme.font = 'Public Sans'
-  window.localStorage.removeItem(`${site.name}-ui-font`)
-
-  appConfig.theme.icons = 'lucide'
-  appConfig.ui.icons = themeIcons.lucide as any
-  window.localStorage.removeItem(`${site.name}-ui-icons`)
-
-  appConfig.theme.blackAsPrimary = false
-  window.localStorage.removeItem(`${site.name}-ui-black-as-primary`)
-}
+const {
+  neutralColors,
+  neutral,
+  primaryColors,
+  primary,
+  setBlackAsPrimary,
+  radiuses,
+  radius,
+  fonts,
+  font,
+  icon,
+  icons,
+  modes,
+  mode,
+  hasCSSChanges,
+  hasAppConfigChanges,
+  exportCSS,
+  exportAppConfig,
+  resetTheme
+} = useTheme()
 </script>
 
 <template>
@@ -418,8 +241,8 @@ function resetTheme() {
             size="sm"
             label="main.css"
             class="flex-1 text-[11px]"
-            :icon="copiedCSS ? 'i-lucide-copy-check' : 'i-lucide-copy'"
-            @click="exportCSS"
+            :icon="copiedCSS ? appConfig.ui.icons.copyCheck : appConfig.ui.icons.copy"
+            @click="copyCSS(exportCSS())"
           />
           <UButton
             v-if="hasAppConfigChanges"
@@ -427,9 +250,9 @@ function resetTheme() {
             variant="soft"
             size="sm"
             label="app.config.ts"
-            :icon="copiedAppConfig ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+            :icon="copiedAppConfig ? appConfig.ui.icons.copyCheck : appConfig.ui.icons.copy"
             class="flex-1 text-[11px]"
-            @click="exportAppConfig"
+            @click="copyAppConfig(exportAppConfig())"
           />
           <UTooltip text="Reset theme">
             <UButton

package/app/composables/useFaq.ts

@@ -0,0 +1,21 @@
+export interface FaqItem {
+  category: string
+  items: string[]
+}
+
+export function useFaq() {
+  const faqQuestions: FaqItem[] = [
+    {
+      category: 'MCP 工具使用',
+      items: [
+        '如何查询所有可用的文档页面？',
+        '如何获取特定文档页面的完整内容？',
+        '什么时候应该使用 list-pages 而不是 get-page？'
+      ]
+    }
+  ]
+
+  return {
+    faqQuestions
+  }
+}

package/app/composables/useHighlighter.ts

@@ -0,0 +1,22 @@
+import { createHighlighter } from 'shiki'
+import type { HighlighterGeneric } from 'shiki'
+import { createJavaScriptRegexEngine } from 'shiki/engine-javascript.mjs'
+
+let highlighter: HighlighterGeneric<any, any> | null = null
+
+let promise: Promise<HighlighterGeneric<any, any>> | null = null
+
+export const useHighlighter = async () => {
+  if (!promise) {
+    promise = createHighlighter({
+      langs: ['vue', 'js', 'ts', 'css', 'html', 'json', 'yaml', 'markdown', 'bash'],
+      themes: ['material-theme-palenight', 'material-theme-lighter'],
+      engine: createJavaScriptRegexEngine()
+    })
+  }
+  if (!highlighter) {
+    highlighter = await promise
+  }
+
+  return highlighter
+}

package/app/composables/useTheme.ts

@@ -0,0 +1,223 @@
+import { themeIcons } from '../utils/theme'
+import { omit } from '@movk/core'
+import colors from 'tailwindcss/colors'
+
+export function useTheme() {
+  const appConfig = useAppConfig()
+  const colorMode = useColorMode()
+  const site = useSiteConfig()
+  const { track } = useAnalytics()
+
+  const neutralColors = ['slate', 'gray', 'zinc', 'neutral', 'stone']
+  const neutral = computed({
+    get() {
+      return appConfig.ui.colors.neutral
+    },
+    set(option) {
+      appConfig.ui.colors.neutral = option
+      window.localStorage.setItem(`${site.name}-ui-neutral`, appConfig.ui.colors.neutral)
+      if (appConfig.vercelAnalytics?.debug) track('Theme Changed', { setting: 'neutral', value: option })
+    }
+  })
+
+  const colorsToOmit = ['inherit', 'current', 'transparent', 'black', 'white', ...neutralColors]
+  const primaryColors = Object.keys(omit(colors, colorsToOmit as any))
+  const primary = computed({
+    get() {
+      return appConfig.ui.colors.primary
+    },
+    set(option) {
+      appConfig.ui.colors.primary = option
+      window.localStorage.setItem(`${site.name}-ui-primary`, appConfig.ui.colors.primary)
+      setBlackAsPrimary(false)
+      if (appConfig.vercelAnalytics?.debug) track('Theme Changed', { setting: 'primary', value: option })
+    }
+  })
+
+  const radiuses = [0, 0.125, 0.25, 0.375, 0.5]
+  const radius = computed({
+    get() {
+      return appConfig.theme.radius
+    },
+    set(option) {
+      appConfig.theme.radius = option
+      window.localStorage.setItem(`${site.name}-ui-radius`, String(appConfig.theme.radius))
+      if (appConfig.vercelAnalytics?.debug) track('Theme Changed', { setting: 'radius', value: option })
+    }
+  })
+
+  const fonts = ['Public Sans', 'DM Sans', 'Geist', 'Inter', 'Poppins', 'Outfit', 'Raleway']
+  const font = computed({
+    get() {
+      return appConfig.theme.font
+    },
+    set(option) {
+      appConfig.theme.font = option
+      window.localStorage.setItem(`${site.name}-ui-font`, appConfig.theme.font)
+      if (appConfig.vercelAnalytics?.debug) track('Theme Changed', { setting: 'font', value: option })
+    }
+  })
+
+  const icons = [{
+    label: 'Lucide',
+    icon: 'i-lucide-feather',
+    value: 'lucide'
+  }, {
+    label: 'Phosphor',
+    icon: 'i-ph-phosphor-logo',
+    value: 'phosphor'
+  }, {
+    label: 'Tabler',
+    icon: 'i-tabler-brand-tabler',
+    value: 'tabler'
+  }]
+  const icon = computed({
+    get() {
+      return appConfig.theme.icons
+    },
+    set(option) {
+      appConfig.theme.icons = option
+      appConfig.ui.icons = themeIcons[option as keyof typeof themeIcons] as any
+      window.localStorage.setItem(`${site.name}-ui-icons`, appConfig.theme.icons)
+      if (appConfig.vercelAnalytics?.debug) track('Theme Changed', { setting: 'icons', value: option })
+    }
+  })
+
+  const modes = [
+    { label: 'light', icon: appConfig.ui.icons.light },
+    { label: 'dark', icon: appConfig.ui.icons.dark },
+    { label: 'system', icon: appConfig.ui.icons.system }
+  ]
+  const mode = computed({
+    get() {
+      return colorMode.value
+    },
+    set(option) {
+      colorMode.preference = option
+      if (appConfig.vercelAnalytics?.debug) track('Theme Changed', { setting: 'color mode', value: option })
+    }
+  })
+
+  function setBlackAsPrimary(value: boolean) {
+    appConfig.theme.blackAsPrimary = value
+    window.localStorage.setItem(`${site.name}-ui-black-as-primary`, String(value))
+    if (appConfig.vercelAnalytics?.debug && value) track('Theme Changed', { setting: 'black as primary', value })
+  }
+
+  const hasCSSChanges = computed(() => {
+    return appConfig.theme.radius !== 0.25
+      || appConfig.theme.blackAsPrimary
+      || appConfig.theme.font !== 'Public Sans'
+  })
+
+  const hasAppConfigChanges = computed(() => {
+    return appConfig.ui.colors.primary !== 'green'
+      || appConfig.ui.colors.neutral !== 'slate'
+      || appConfig.theme.icons !== 'lucide'
+  })
+
+  function exportCSS(): string {
+    if (appConfig.vercelAnalytics?.debug) track('Theme Exported', { type: 'css' })
+
+    const lines = [
+      '@import "tailwindcss";',
+      '@import "@nuxt/ui";'
+    ]
+
+    if (appConfig.theme.font !== 'Public Sans') {
+      lines.push('', '@theme {', `  --font-sans: '${appConfig.theme.font}', sans-serif;`, '}')
+    }
+
+    const rootLines: string[] = []
+    if (appConfig.theme.radius !== 0.25) {
+      rootLines.push(`  --ui-radius: ${appConfig.theme.radius}rem;`)
+    }
+    if (appConfig.theme.blackAsPrimary) {
+      rootLines.push('  --ui-primary: black;')
+    }
+
+    if (rootLines.length) {
+      lines.push('', ':root {', ...rootLines, '}')
+    }
+
+    if (appConfig.theme.blackAsPrimary) {
+      lines.push('', '.dark {', '  --ui-primary: white;', '}')
+    }
+
+    return lines.join('\n')
+  }
+
+  function exportAppConfig(): string {
+    if (appConfig.vercelAnalytics?.debug) track('Theme Exported', { type: 'appConfig' })
+
+    const config: Record<string, any> = {}
+
+    if (appConfig.ui.colors.primary !== 'green' || appConfig.ui.colors.neutral !== 'slate') {
+      config.ui = { colors: {} }
+      if (appConfig.ui.colors.primary !== 'green') {
+        config.ui.colors.primary = appConfig.ui.colors.primary
+      }
+      if (appConfig.ui.colors.neutral !== 'slate') {
+        config.ui.colors.neutral = appConfig.ui.colors.neutral
+      }
+    }
+
+    if (appConfig.theme.icons !== 'lucide') {
+      const iconSet = appConfig.theme.icons
+      const icons = themeIcons[iconSet as keyof typeof themeIcons]
+      config.ui = config.ui || {}
+      config.ui.icons = icons
+    }
+
+    const configString = JSON.stringify(config, null, 2)
+      .replace(/"([^"]+)":/g, '$1:')
+      .replace(/"/g, '\'')
+
+    return `export default defineAppConfig(${configString})`
+  }
+
+  function resetTheme() {
+    if (appConfig.vercelAnalytics?.debug) track('Theme Reset')
+
+    // Reset without triggering individual tracking events
+    appConfig.ui.colors.primary = 'green'
+    window.localStorage.removeItem(`${site.name}-ui-primary`)
+
+    appConfig.ui.colors.neutral = 'slate'
+    window.localStorage.removeItem(`${site.name}-ui-neutral`)
+
+    appConfig.theme.radius = 0.25
+    window.localStorage.removeItem(`${site.name}-ui-radius`)
+
+    appConfig.theme.font = 'Public Sans'
+    window.localStorage.removeItem(`${site.name}-ui-font`)
+
+    appConfig.theme.icons = 'lucide'
+    appConfig.ui.icons = themeIcons.lucide as any
+    window.localStorage.removeItem(`${site.name}-ui-icons`)
+
+    appConfig.theme.blackAsPrimary = false
+    window.localStorage.removeItem(`${site.name}-ui-black-as-primary`)
+  }
+
+  return {
+    neutralColors,
+    neutral,
+    primaryColors,
+    primary,
+    setBlackAsPrimary,
+    radiuses,
+    radius,
+    fonts,
+    font,
+    icon,
+    icons,
+    modes,
+    mode,
+    hasCSSChanges,
+    hasAppConfigChanges,
+    exportCSS,
+    exportAppConfig,
+    resetTheme
+  }
+}

package/app/layouts/docs.vue

@@ -1,13 +1,3 @@
-<script setup lang="ts">
-import type { ContentNavigationItem } from '@nuxt/content'
-
-const route = useRoute()
-
-const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
-
-const { navigationByCategory } = useNavigation(navigation!)
-</script>
-
 <template>
   <UMain class="relative">
     <HeroBackground />
@@ -16,11 +6,8 @@ const { navigationByCategory } = useNavigation(navigation!)
       <UPage>
         <template #left>
           <UPageAside>
-            <UContentNavigation
-              :key="route.path"
-              :navigation="navigationByCategory"
-              highlight
-            />
+            <DocsAsideLeftTop />
+            <DocsAsideLeftBody />
           </UPageAside>
         </template>
 

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

@@ -151,7 +151,7 @@ defineOgImageComponent('Nuxt', {
 
             <USeparator v-if="communityLinks?.length" type="dashed" />
 
-            <AdsCarbon />
+            <DocsAsideRightBottom />
           </div>
         </template>
       </UContentToc>

package/app/utils/shiki-transformer-icon-highlight.ts

@@ -76,7 +76,7 @@ export function transformerIconHighlight(options: TransformerIconHighlightOption
             tagName: 'i',
             properties: {
               class: 'shiki-icon-highlight',
-              style: `--shiki-icon-url: url('${iconUrl}')`
+              style: `--shiki-icon-url: url(${iconUrl})`
             },
             children: []
           }