@movk/nuxt-docs 1.3.12 → 1.4.1

package/README.md

@@ -159,47 +159,6 @@ icon: i-lucide-rocket
 
 了解更多关于 MDC 语法，请查看 [Nuxt Content 文档](https://content.nuxt.com/docs/files/markdown#mdc-syntax)。
 
-## 🔌 集成第三方服务
-
-本主题不内置任何分析或监控工具，你可以根据需求自由选择。
-
-### Vercel Analytics
-
-```bash [Terminal]
-pnpm add @vercel/analytics @vercel/speed-insights
-```
-
-创建 `app/plugins/analytics.client.ts`：
-
-```typescript [app/plugins/analytics.client.ts]
-import { Analytics } from '@vercel/analytics/nuxt'
-import { SpeedInsights } from '@vercel/speed-insights/nuxt'
-import { createApp, h } from 'vue'
-
-export default defineNuxtPlugin({
-  name: 'vercel-analytics',
-  enforce: 'post',
-  hooks: {
-    'app:mounted': () => {
-      if (import.meta.dev) return
-
-      const container = document.createElement('div')
-      container.id = 'vercel-analytics'
-      document.body.appendChild(container)
-
-      const app = createApp({
-        render: () => h('div', { style: 'display: none;' }, [
-          h(Analytics, { debug: false }),
-          h(SpeedInsights, { debug: false })
-        ])
-      })
-
-      app.mount(container)
-    }
-  }
-})
-```
-
 ### 其他工具
 
 - **Google Analytics** - [@nuxtjs/google-analytics](https://google-analytics.nuxtjs.org/)

package/app/app.config.ts

@@ -2,19 +2,21 @@ import type { ButtonProps } from '@nuxt/ui'
 
 export default defineAppConfig({
   toaster: {
-    expand: true,
-    position: 'top-right' as const,
-    duration: 3000,
-    max: 5
+    position: 'bottom-right' as const,
+    duration: 5000,
+    max: 5,
+    expand: true
   },
   theme: {
     radius: 0.25,
-    blackAsPrimary: false
+    blackAsPrimary: false,
+    icons: 'lucide',
+    font: 'Public Sans'
   },
   ui: {
     colors: {
-      primary: 'indigo',
-      neutral: 'zinc'
+      primary: 'green',
+      neutral: 'slate'
     },
     contentNavigation: {
       slots: {
@@ -32,7 +34,9 @@ export default defineAppConfig({
       }
     }
   },
+  vercelAnalytics: false,
   header: {
+    avatar: 'https://docs.mhaibaraai.cn/avatar.png',
     title: 'Movk Nuxt Docs',
     to: '/',
     search: true,

package/app/app.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import colors from 'tailwindcss/colors'
+import { Analytics } from '@vercel/analytics/nuxt'
+import { SpeedInsights } from '@vercel/speed-insights/nuxt'
 
 const site = useSiteConfig()
 const appConfig = useAppConfig()
@@ -13,6 +15,7 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
 const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
+const font = computed(() => `:root { --font-sans: '${appConfig.theme.font}', sans-serif; }`)
 
 useHead({
   meta: [
@@ -21,7 +24,8 @@ useHead({
   ],
   style: [
     { innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
-    { innerHTML: blackAsPrimary, id: 'nuxt-ui-black-as-primary', tagPriority: -2 }
+    { innerHTML: blackAsPrimary, id: 'nuxt-ui-black-as-primary', tagPriority: -2 },
+    { innerHTML: font, id: 'nuxt-ui-font', tagPriority: -2 }
   ]
 })
 
@@ -41,6 +45,8 @@ provide('navigation', rootNavigation)
 <template>
   <UApp :toaster="appConfig.toaster">
     <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
+    <Analytics v-if="appConfig.vercelAnalytics" />
+    <SpeedInsights v-if="appConfig.vercelAnalytics" />
 
     <div :class="{ root: route.path.startsWith('/docs/') }">
       <template v-if="!route.path.startsWith('/examples')">
@@ -55,7 +61,7 @@ provide('navigation', rootNavigation)
         <Footer />
 
         <ClientOnly>
-          <LazyUContentSearch :files="files" :navigation="rootNavigation" :fuse="{ resultLimit: 1000 }"/>
+          <LazyUContentSearch :files="files" :navigation="rootNavigation" :fuse="{ resultLimit: 1000 }" />
         </ClientOnly>
       </template>
     </div>

package/app/components/PageHeaderLinks.vue

@@ -3,6 +3,8 @@ const route = useRoute()
 const toast = useToast()
 const { copy, copied } = useClipboard()
 const site = useSiteConfig()
+const { vercelAnalytics } = useAppConfig()
+const { track } = useAnalytics()
 
 const mdPath = computed(() => `${site.url}/raw${route.path}.md`)
 
@@ -11,6 +13,7 @@ const items = [
     label: 'Copy Markdown link',
     icon: 'i-lucide-link',
     onSelect() {
+      if (vercelAnalytics) track ('Page Action', { action: 'Copy Markdown Link' })
       copy(mdPath.value)
       toast.add({
         title: 'Copied to clipboard',
@@ -22,23 +25,33 @@ const items = [
     label: 'View as Markdown',
     icon: 'i-simple-icons:markdown',
     target: '_blank',
-    to: `/raw${route.path}.md`
+    to: `/raw${route.path}.md`,
+    onSelect() {
+      if (vercelAnalytics) track('Page Action', { action: 'View as Markdown' })
+    }
   },
   {
     label: 'Open in ChatGPT',
     icon: 'i-simple-icons:openai',
     target: '_blank',
-    to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${mdPath.value} so I can ask questions about it.`)}`
+    to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${mdPath.value} so I can ask questions about it.`)}`,
+    onSelect() {
+      if (vercelAnalytics) track('Page Action', { action: 'Open in ChatGPT' })
+    }
   },
   {
     label: 'Open in Claude',
     icon: 'i-simple-icons:anthropic',
     target: '_blank',
-    to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${mdPath.value} so I can ask questions about it.`)}`
+    to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${mdPath.value} so I can ask questions about it.`)}`,
+    onSelect() {
+      if (vercelAnalytics) track('Page Action', { action: 'Open in Claude' })
+    }
   }
 ]
 
 async function copyPage() {
+  if (vercelAnalytics) track('Page Action', { action: 'Copy Page Content' })
   copy(await $fetch<string>(`/raw${route.path}.md`))
 }
 </script>

package/app/components/content/CommitChangelog.vue

@@ -55,7 +55,7 @@ const filePath = computed(() => {
 
 const { data: commits } = await useLazyFetch<Commit[]>('/api/github/commits', {
   key: `commit-changelog-${props.name ?? routeName.value}-${props.author ?? 'all'}`,
-  query: { path: filePath.value, author: props.author }
+  query: { path: [filePath.value], author: props.author }
 })
 
 // 格式化提交消息

package/app/components/header/HeaderLogo.vue

@@ -3,55 +3,7 @@ const { header } = useAppConfig()
 </script>
 
 <template>
-  <NuxtLink
-    :to="header.to"
-    class="flex items-center gap-2 font-bold text-xl text-highlighted min-w-0 focus-visible:outline-primary shrink-0"
-    :aria-label="header.title"
-  >
-    <svg
-      width="256"
-      height="256"
-      viewBox="0 0 256 256"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      class="w-auto h-10 shrink-0"
-    >
-      <circle
-        cx="128"
-        cy="128"
-        r="120"
-        fill="var(--ui-primary)"
-      />
-      <g fill="white" opacity="0.95">
-        <path
-          d="M38.5 175.6 c-1.5 -1 -1.9 -2.7 -1.9 -7.7 0 -5.5 0.4 -7.1 3.1 -11.4 1.8 -2.7 4.8 -6.3 6.8 -7.8 1.9 -1.5 3.5 -3.2 3.5 -3.8 0 -1.2 -5.8 -0.4 -11.5 1.6 -11.7 4.1 -16.3 3.7 -19 -1.5 -2.6 -5 -1.2 -8.4 4.2 -11 6.6 -3.1 10.4 -3.5 14.3 -1.5 2.1 1.1 4.1 1.4 5.9 0.9 1.4 -0.4 3.5 -0.9 4.6 -1.1 4.9 -0.9 12.3 -3.8 16 -6.3 13.7 -9.4 18.6 -11.7 34 -16 6.6 -1.9 11.9 -2.4 31.3 -3.1 l23.4 -0.8 8.4 -8.5 c5.7 -5.8 9.5 -8.8 11.9 -9.5 1.9 -0.5 5.8 -2.4 8.7 -4.1 4.5 -2.8 5.4 -3 7.5 -1.9 2 1.1 2.9 0.9 6.2 -0.9 6.4 -3.6 7.6 -2.5 4.4 4.3 l-1.7 3.5 3.3 4.1 c2.8 3.5 3.2 4.6 2.7 7.7 -0.3 2 0 5.1 0.6 6.8 1.8 5 -0.4 8.9 -6.3 11.6 -2.9 1.4 -4.5 2.6 -4 3.3 0.4 0.5 1.6 3.5 2.6 6.5 2.8 8.8 1.9 8.2 13.5 8.5 10.2 0.2 21.7 1.9 25.3 3.7 2 1 2.3 5.1 0.3 6.7 -0.7 0.6 -5.1 1.5 -9.7 2.1 -4.6 0.5 -12.7 1.9 -17.9 3 -8.5 1.8 -12.8 2 -42 1.9 -17.9 -0.1 -35 -0.3 -38 -0.5 -3 -0.1 -10.7 -0.6 -17.1 -1 -9.7 -0.6 -12.4 -0.4 -17 1.1 -7.2 2.3 -7.3 2.4 -5.5 4.4 2.2 2.5 3.1 7.8 1.6 9.6 -2.7 3.3 -9.3 1.2 -17.4 -5.5 -5.6 -4.7 -8.8 -5 -15.6 -1.7 -4.4 2.2 -4.5 2.3 -4.8 7.6 -0.2 3.7 -0.9 5.9 -2 6.8 -2.3 1.7 -10.3 1.6 -12.7 -0.1z"
-        />
-      </g>
-      <g fill="white" opacity="0.98">
-        <path
-          d="M142 209.3 c-0.7 -1.6 -2.3 -5.7 -3.5 -9.3 -1.3 -3.6 -2.6 -7.2 -3 -8.1 -0.4 -1.1 0 -1.8 1.4 -2.2 1.7 -0.4 2.4 0.4 4.3 5.4 1.3 3.2 2.5 5.9 2.8 5.9 0.3 0 1.9 -2.6 3.5 -5.8 2.1 -4 3.7 -5.8 5.3 -6 1.2 -0.2 2.2 -0.1 2.2 0.3 0 0.5 -10.8 21.5 -11.5 22.3 -0.1 0.1 -0.8 -1 -1.5 -2.5z"
-        />
-        <path
-          d="M84.5 201.3 c1 -12.9 1.6 -13.8 4.8 -6.9 1.5 3.1 2.9 5.6 3.3 5.6 0.3 0 3.1 -2.2 6.2 -5 3 -2.7 5.7 -4.8 5.9 -4.7 0.3 0.4 3.1 19.1 2.9 19.4 -0.1 0.2 -1.3 0.4 -2.7 0.5 -2.2 0.3 -2.4 0 -2.7 -4.9 -0.2 -2.9 -0.6 -5.3 -0.9 -5.3 -0.3 0 -2.3 1.4 -4.4 3.1 -3.7 2.9 -4.1 3 -5.8 1.5 -1.7 -1.6 -1.9 -1.6 -2.5 -0.1 -0.3 0.9 -0.6 2.8 -0.6 4.1 0 1.8 -0.5 2.4 -2.1 2.4 -2 0 -2.1 -0.3 -1.4 -9.7z"
-        />
-        <path
-          d="M115.9 209.5 c-5.9 -3.2 -6.4 -12.8 -0.9 -17.7 3.4 -3.1 5.6 -3.4 10.3 -1.5 4.3 1.8 5.9 4 6 7.9 0.1 6.4 -1.2 10.4 -3.9 11.6 -3.3 1.6 -8.3 1.4 -11.5 -0.3z m9.6 -4.5 c2.1 -2.4 2.4 -7.2 0.5 -9.4 -2 -2.5 -7.7 -2.1 -9.1 0.6 -3.9 7.3 3.3 14.7 8.6 8.8z"
-        />
-        <path
-          d="M158 200 c0 -11 0 -11 2.4 -11 2.3 0 2.4 0.3 1.9 3.6 -0.6 3.5 -0.5 3.6 1.6 2.5 1.2 -0.7 2.7 -2 3.3 -3.1 0.9 -1.4 1.5 -1.6 2.6 -0.8 1 0.9 0.6 1.9 -2.5 5 l-3.8 3.9 2.5 1.9 c1.4 1.1 3.7 2.5 5.3 3.2 3 1.4 3.3 2.1 1.4 3.6 -0.9 0.8 -2.4 0.3 -5.7 -1.9 l-4.5 -3.1 -0.3 3.6 c-0.3 2.8 -0.8 3.6 -2.3 3.6 -1.8 0 -1.9 -0.8 -1.9 -11z"
-        />
-      </g>
-      <circle
-        cx="128"
-        cy="128"
-        r="118"
-        stroke="white"
-        stroke-width="1.5"
-        fill="none"
-        opacity="0.15"
-      />
-    </svg>
-
-    <p class="font-medium text-highlighted">{{ header.title }}</p>
+  <NuxtLink :to="header.to">
+    <UUser :avatar="{ src: header.avatar }" :name="header.title" />
   </NuxtLink>
 </template>

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

@@ -1,11 +1,26 @@
 <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()
+
+const open = ref(false)
+
+watch(open, (isOpen) => {
+  if (isOpen && appConfig.vercelAnalytics) {
+    track('Theme Picker Opened')
+  }
+})
+
+const { copy: copyCSS, copied: copiedCSS } = useClipboard()
+const { copy: copyAppConfig, copied: copiedAppConfig } = useClipboard()
+
 const neutralColors = ['slate', 'gray', 'zinc', 'neutral', 'stone']
 const neutral = computed({
   get() {
@@ -14,6 +29,7 @@ const neutral = computed({
   set(option) {
     appConfig.ui.colors.neutral = option
     window.localStorage.setItem(`${site.name}-ui-neutral`, appConfig.ui.colors.neutral)
+    if (appConfig.vercelAnalytics) track('Theme Changed', { setting: 'neutral', value: option })
   }
 })
 
@@ -27,6 +43,7 @@ const primary = computed({
     appConfig.ui.colors.primary = option
     window.localStorage.setItem(`${site.name}-ui-primary`, appConfig.ui.colors.primary)
     setBlackAsPrimary(false)
+    if (appConfig.vercelAnalytics) track('Theme Changed', { setting: 'primary', value: option })
   }
 })
 
@@ -38,6 +55,7 @@ const radius = computed({
   set(option) {
     appConfig.theme.radius = option
     window.localStorage.setItem(`${site.name}-ui-radius`, String(appConfig.theme.radius))
+    if (appConfig.vercelAnalytics) track('Theme Changed', { setting: 'radius', value: option })
   }
 })
 
@@ -52,18 +70,155 @@ const mode = computed({
   },
   set(option) {
     colorMode.preference = option
+    if (appConfig.vercelAnalytics) 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) 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) 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) 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) 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) 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) 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`)
 }
 </script>
 
 <template>
-  <UPopover :ui="{ content: 'w-72 px-6 py-4 flex flex-col gap-4' }">
-    <template #default="{ open }">
+  <UPopover v-model:open="open" :ui="{ content: 'w-72 px-6 py-4 flex flex-col gap-4 overflow-y-auto max-h-[calc(100vh-5rem)]' }">
+    <template #default>
       <UButton
         icon="i-lucide-swatch-book"
         color="neutral"
@@ -76,8 +231,19 @@ function setBlackAsPrimary(value: boolean) {
 
     <template #content>
       <fieldset>
-        <legend class="text-[11px] leading-none font-semibold mb-2">
+        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
           Primary
+
+          <UButton
+            to="https://ui.nuxt.com/docs/getting-started/theme/css-variables#colors"
+            size="xs"
+            color="neutral"
+            variant="link"
+            target="_blank"
+            icon="i-lucide-circle-help"
+            class="p-0 -my-0.5"
+            :ui="{ leadingIcon: 'size-3' }"
+          />
         </legend>
 
         <div class="grid grid-cols-3 gap-1 -mx-2">
@@ -99,8 +265,19 @@ function setBlackAsPrimary(value: boolean) {
       </fieldset>
 
       <fieldset>
-        <legend class="text-[11px] leading-none font-semibold mb-2">
+        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
           Neutral
+
+          <UButton
+            to="https://ui.nuxt.com/docs/getting-started/theme/css-variables#text"
+            size="xs"
+            color="neutral"
+            variant="link"
+            target="_blank"
+            icon="i-lucide-circle-help"
+            class="p-0 -my-0.5"
+            :ui="{ leadingIcon: 'size-3' }"
+          />
         </legend>
 
         <div class="grid grid-cols-3 gap-1 -mx-2">
@@ -116,8 +293,19 @@ function setBlackAsPrimary(value: boolean) {
       </fieldset>
 
       <fieldset>
-        <legend class="text-[11px] leading-none font-semibold mb-2">
+        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
           Radius
+
+          <UButton
+            to="https://ui.nuxt.com/docs/getting-started/theme/css-variables#radius"
+            size="xs"
+            color="neutral"
+            variant="link"
+            target="_blank"
+            icon="i-lucide-circle-help"
+            class="p-0 -my-0.5"
+            :ui="{ leadingIcon: 'size-3' }"
+          />
         </legend>
 
         <div class="grid grid-cols-5 gap-1 -mx-2">
@@ -133,8 +321,77 @@ function setBlackAsPrimary(value: boolean) {
       </fieldset>
 
       <fieldset>
-        <legend class="text-[11px] leading-none font-semibold mb-2">
-          Theme
+        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
+          Font
+
+          <UButton
+            to="https://ui.nuxt.com/docs/getting-started/integrations/fonts"
+            size="xs"
+            color="neutral"
+            variant="link"
+            target="_blank"
+            icon="i-lucide-circle-help"
+            class="p-0 -my-0.5"
+            :ui="{ leadingIcon: 'size-3' }"
+          />
+        </legend>
+
+        <div class="-mx-2">
+          <USelect
+            v-model="font"
+            size="sm"
+            color="neutral"
+            icon="i-lucide-type"
+            :items="fonts"
+            class="w-full ring-default rounded-sm hover:bg-elevated/50 text-[11px] data-[state=open]:bg-elevated/50"
+            :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+          />
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
+          Icons
+
+          <UButton
+            to="https://ui.nuxt.com/docs/getting-started/integrations/icons"
+            size="xs"
+            color="neutral"
+            variant="link"
+            target="_blank"
+            icon="i-lucide-circle-help"
+            class="p-0 -my-0.5"
+            :ui="{ leadingIcon: 'size-3' }"
+          />
+        </legend>
+
+        <div class="-mx-2">
+          <USelect
+            v-model="icon"
+            size="sm"
+            color="neutral"
+            :icon="icons.find(i => i.value === icon)?.icon"
+            :items="icons"
+            class="w-full ring-default rounded-sm hover:bg-elevated/50 capitalize text-[11px] data-[state=open]:bg-elevated/50"
+            :ui="{ item: 'capitalize text-[11px]', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+          />
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
+          Color Mode
+
+          <UButton
+            to="https://ui.nuxt.com/docs/getting-started/integrations/color-mode"
+            size="xs"
+            color="neutral"
+            variant="link"
+            target="_blank"
+            icon="i-lucide-circle-help"
+            class="p-0 -my-0.5"
+            :ui="{ leadingIcon: 'size-3' }"
+          />
         </legend>
 
         <div class="grid grid-cols-3 gap-1 -mx-2">
@@ -147,6 +404,45 @@ function setBlackAsPrimary(value: boolean) {
           />
         </div>
       </fieldset>
+
+      <fieldset v-if="hasCSSChanges || hasAppConfigChanges">
+        <legend class="text-[11px] leading-none font-semibold mb-2 select-none">
+          Export
+        </legend>
+
+        <div class="flex items-center justify-between gap-1 -mx-2">
+          <UButton
+            v-if="hasCSSChanges"
+            color="neutral"
+            variant="soft"
+            size="sm"
+            label="main.css"
+            class="flex-1 text-[11px]"
+            :icon="copiedCSS ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+            @click="exportCSS"
+          />
+          <UButton
+            v-if="hasAppConfigChanges"
+            color="neutral"
+            variant="soft"
+            size="sm"
+            label="app.config.ts"
+            :icon="copiedAppConfig ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+            class="flex-1 text-[11px]"
+            @click="exportAppConfig"
+          />
+          <UTooltip text="Reset theme">
+            <UButton
+              color="neutral"
+              variant="outline"
+              size="sm"
+              icon="i-lucide-rotate-ccw"
+              class="ms-auto ring-default hover:bg-elevated/50"
+              @click="resetTheme"
+            />
+          </UTooltip>
+        </div>
+      </fieldset>
     </template>
   </UPopover>
 </template>

package/app/composables/useAnalytics.ts

@@ -0,0 +1,7 @@
+import { track } from '@vercel/analytics'
+
+export function useAnalytics() {
+  return {
+    track
+  }
+}

package/app/error.vue

@@ -18,6 +18,7 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
 const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
+const font = computed(() => `:root { --font-sans: '${appConfig.theme.font}', sans-serif; }`)
 
 useHead({
   meta: [
@@ -26,7 +27,8 @@ useHead({
   ],
   style: [
     { innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
-    { innerHTML: blackAsPrimary, id: 'nuxt-ui-black-as-primary', tagPriority: -2 }
+    { innerHTML: blackAsPrimary, id: 'nuxt-ui-black-as-primary', tagPriority: -2 },
+    { innerHTML: font, id: 'nuxt-ui-font', tagPriority: -2 }
   ]
 })
 

package/app/plugins/theme.ts

@@ -1,3 +1,5 @@
+import { themeIcons } from '../utils/theme'
+
 export default defineNuxtPlugin({
   enforce: 'post',
   setup() {
@@ -26,12 +28,32 @@ export default defineNuxtPlugin({
         }
       }
 
+      function updateFont() {
+        const font = localStorage.getItem(`${site.name}-ui-font`)
+        if (font) {
+          appConfig.theme.font = font
+        }
+      }
+
       updateColor('primary')
       updateColor('neutral')
       updateRadius()
       updateBlackAsPrimary()
+      updateFont()
     }
 
+    onNuxtReady(() => {
+      function updateIcons() {
+        const icons = localStorage.getItem(`${site.name}-ui-icons`)
+        if (icons) {
+          appConfig.theme.icons = icons
+          appConfig.ui.icons = themeIcons[icons as keyof typeof themeIcons] as any
+        }
+      }
+
+      updateIcons()
+    })
+
     if (import.meta.server) {
       useHead({
         script: [{
@@ -75,6 +97,13 @@ export default defineNuxtPlugin({
               document.querySelector('style#nuxt-ui-black-as-primary').innerHTML = '';
             }
           `.replace(/\s+/g, ' ')
+        }, {
+          innerHTML: `
+            if (localStorage.getItem('${site.name}-ui-font')) {
+              const font = localStorage.getItem('${site.name}-ui-font');
+              document.querySelector('style#nuxt-ui-font').innerHTML = ':root { --font-sans: \\'' + font + '\\', sans-serif; }';
+            }
+          `.replace(/\s+/g, ' ')
         }]
       })
     }

package/app/types/index.d.ts

@@ -2,6 +2,7 @@ import type { ButtonProps } from '@nuxt/ui'
 
 declare module 'nuxt/schema' {
   interface AppConfig {
+    vercelAnalytics: boolean
     seo: {
       titleTemplate: string
       title: string
@@ -9,6 +10,7 @@ declare module 'nuxt/schema' {
     }
     header: {
       title: string
+      avatar: string
       to: string
       search: boolean
       colorMode: boolean

package/app/utils/theme.ts

@@ -0,0 +1,136 @@
+export const themeIcons = {
+  lucide: {
+    arrowDown: 'i-lucide-arrow-down',
+    arrowLeft: 'i-lucide-arrow-left',
+    arrowRight: 'i-lucide-arrow-right',
+    arrowUp: 'i-lucide-arrow-up',
+    caution: 'i-lucide-circle-alert',
+    check: 'i-lucide-check',
+    chevronDoubleLeft: 'i-lucide-chevrons-left',
+    chevronDoubleRight: 'i-lucide-chevrons-right',
+    chevronDown: 'i-lucide-chevron-down',
+    chevronLeft: 'i-lucide-chevron-left',
+    chevronRight: 'i-lucide-chevron-right',
+    chevronUp: 'i-lucide-chevron-up',
+    close: 'i-lucide-x',
+    copy: 'i-lucide-copy',
+    copyCheck: 'i-lucide-copy-check',
+    dark: 'i-lucide-moon',
+    drag: 'i-lucide-grip-vertical',
+    ellipsis: 'i-lucide-ellipsis',
+    error: 'i-lucide-circle-x',
+    external: 'i-lucide-arrow-up-right',
+    eye: 'i-lucide-eye',
+    eyeOff: 'i-lucide-eye-off',
+    file: 'i-lucide-file',
+    folder: 'i-lucide-folder',
+    folderOpen: 'i-lucide-folder-open',
+    hash: 'i-lucide-hash',
+    info: 'i-lucide-info',
+    light: 'i-lucide-sun',
+    loading: 'i-lucide-loader-circle',
+    menu: 'i-lucide-menu',
+    minus: 'i-lucide-minus',
+    panelClose: 'i-lucide-panel-left-close',
+    panelOpen: 'i-lucide-panel-left-open',
+    plus: 'i-lucide-plus',
+    reload: 'i-lucide-rotate-ccw',
+    search: 'i-lucide-search',
+    stop: 'i-lucide-square',
+    success: 'i-lucide-circle-check',
+    system: 'i-lucide-monitor',
+    tip: 'i-lucide-lightbulb',
+    upload: 'i-lucide-upload',
+    warning: 'i-lucide-triangle-alert'
+  },
+  phosphor: {
+    arrowDown: 'i-ph-arrow-down',
+    arrowLeft: 'i-ph-arrow-left',
+    arrowRight: 'i-ph-arrow-right',
+    arrowUp: 'i-ph-arrow-up',
+    caution: 'i-ph-warning-circle',
+    check: 'i-ph-check',
+    chevronDoubleLeft: 'i-ph-caret-double-left',
+    chevronDoubleRight: 'i-ph-caret-double-right',
+    chevronDown: 'i-ph-caret-down',
+    chevronLeft: 'i-ph-caret-left',
+    chevronRight: 'i-ph-caret-right',
+    chevronUp: 'i-ph-caret-up',
+    close: 'i-ph-x',
+    copy: 'i-ph-copy',
+    copyCheck: 'i-ph-check-circle',
+    dark: 'i-ph-moon',
+    drag: 'i-ph-dots-six-vertical',
+    ellipsis: 'i-ph-dots-three',
+    error: 'i-ph-x-circle',
+    external: 'i-ph-arrow-up-right',
+    eye: 'i-ph-eye',
+    eyeOff: 'i-ph-eye-slash',
+    file: 'i-ph-file',
+    folder: 'i-ph-folder',
+    folderOpen: 'i-ph-folder-open',
+    hash: 'i-ph-hash',
+    info: 'i-ph-info',
+    light: 'i-ph-sun',
+    loading: 'i-ph-circle-notch',
+    menu: 'i-ph-list',
+    minus: 'i-ph-minus',
+    panelClose: 'i-ph-caret-left',
+    panelOpen: 'i-ph-caret-right',
+    plus: 'i-ph-plus',
+    reload: 'i-ph-arrow-counter-clockwise',
+    search: 'i-ph-magnifying-glass',
+    stop: 'i-ph-square',
+    success: 'i-ph-check-circle',
+    system: 'i-ph-monitor',
+    tip: 'i-ph-lightbulb',
+    upload: 'i-ph-upload',
+    warning: 'i-ph-warning'
+  },
+  tabler: {
+    arrowDown: 'i-tabler-arrow-down',
+    arrowLeft: 'i-tabler-arrow-left',
+    arrowRight: 'i-tabler-arrow-right',
+    arrowUp: 'i-tabler-arrow-up',
+    caution: 'i-tabler-alert-square-rounded',
+    check: 'i-tabler-check',
+    chevronDoubleLeft: 'i-tabler-chevrons-left',
+    chevronDoubleRight: 'i-tabler-chevrons-right',
+    chevronDown: 'i-tabler-chevron-down',
+    chevronLeft: 'i-tabler-chevron-left',
+    chevronRight: 'i-tabler-chevron-right',
+    chevronUp: 'i-tabler-chevron-up',
+    close: 'i-tabler-x',
+    copy: 'i-tabler-copy',
+    copyCheck: 'i-tabler-copy-check',
+    dark: 'i-tabler-moon',
+    drag: 'i-tabler-grip-vertical',
+    ellipsis: 'i-tabler-dots',
+    error: 'i-tabler-square-rounded-x',
+    external: 'i-tabler-external-link',
+    eye: 'i-tabler-eye',
+    eyeOff: 'i-tabler-eye-off',
+    file: 'i-tabler-file',
+    folder: 'i-tabler-folder',
+    folderOpen: 'i-tabler-folder-open',
+    hash: 'i-tabler-hash',
+    info: 'i-tabler-info-square-rounded',
+    light: 'i-tabler-sun',
+    loading: 'i-tabler-loader-2',
+    menu: 'i-tabler-menu',
+    minus: 'i-tabler-minus',
+    panelClose: 'i-tabler-layout-sidebar-left-collapse',
+    panelOpen: 'i-tabler-layout-sidebar-left-expand',
+    plus: 'i-tabler-plus',
+    reload: 'i-tabler-reload',
+    search: 'i-tabler-search',
+    stop: 'i-tabler-player-stop',
+    success: 'i-tabler-square-rounded-check',
+    system: 'i-tabler-device-desktop',
+    tip: 'i-tabler-bulb',
+    upload: 'i-tabler-upload',
+    warning: 'i-tabler-alert-triangle'
+  }
+}
+
+export type ThemeIcons = keyof typeof themeIcons

package/nuxt.config.ts

@@ -73,6 +73,17 @@ export default defineNuxtConfig({
       }
     }
   },
+  fonts: {
+    families: [
+      { name: 'Public Sans', provider: 'google', global: true },
+      { name: 'DM Sans', provider: 'google', global: true },
+      { name: 'Geist', provider: 'google', global: true },
+      { name: 'Inter', provider: 'google', global: true },
+      { name: 'Poppins', provider: 'google', global: true },
+      { name: 'Outfit', provider: 'google', global: true },
+      { name: 'Raleway', provider: 'google', global: true }
+    ]
+  },
   icon: {
     provider: 'iconify'
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@movk/nuxt-docs",
   "type": "module",
-  "version": "1.3.12",
+  "version": "1.4.1",
   "private": false,
   "description": "An elegant documentation theme for Nuxt, powered by Nuxt UI and Nuxt Content.",
   "author": "YiXuan <mhaibaraai@gmail.com>",
@@ -27,16 +27,18 @@
     "README.md"
   ],
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.79",
-    "@iconify-json/simple-icons": "^1.2.62",
+    "@iconify-json/lucide": "^1.2.81",
+    "@iconify-json/simple-icons": "^1.2.63",
     "@iconify-json/vscode-icons": "^1.2.37",
     "@movk/core": "^1.0.2",
     "@nuxt/content": "^3.9.0",
     "@nuxt/image": "^2.0.0",
     "@nuxt/kit": "^4.2.2",
-    "@nuxt/ui": "^4.2.1",
-    "@nuxtjs/seo": "^3.2.2",
+    "@nuxt/ui": "^4.3.0",
+    "@nuxtjs/seo": "^3.3.0",
     "@octokit/rest": "^22.0.1",
+    "@vercel/analytics": "^1.6.1",
+    "@vercel/speed-insights": "^1.3.1",
     "@vueuse/core": "^14.1.0",
     "@vueuse/nuxt": "^14.1.0",
     "defu": "^6.1.4",
@@ -50,7 +52,7 @@
     "pkg-types": "^2.3.0",
     "prettier": "^3.7.4",
     "scule": "^1.3.0",
-    "tailwindcss": "^4.1.17",
+    "tailwindcss": "^4.1.18",
     "ufo": "^1.6.1"
   }
 }

package/server/api/github/commits.get.ts

@@ -5,8 +5,10 @@ export default defineCachedEventHandler(async (event) => {
     return []
   }
 
-  const { path, author } = getQuery(event) as { path: string, author?: string }
-  if (!path) {
+  const { path, author } = getQuery(event) as { path: string | string[], author: string }
+  const paths = Array.isArray(path) ? path : [path]
+
+  if (!paths.length || !paths[0]) {
     throw createError({
       statusCode: 400,
       statusMessage: 'Path is required'
@@ -15,26 +17,41 @@ export default defineCachedEventHandler(async (event) => {
 
   const { github } = useAppConfig()
   const octokit = new Octokit({ auth: process.env.NUXT_GITHUB_TOKEN })
-  const commits = await octokit.paginate(octokit.rest.repos.listCommits, {
-    sha: github.branch,
-    owner: github.owner,
-    repo: github.name,
-    path,
-    since: github.since,
-    per_page: github.per_page,
-    until: github.until,
-    ...(author && { author })
-  })
 
-  return commits.map(commit => ({
-    sha: commit.sha,
-    date: commit.commit.author?.date ?? '',
-    message: (commit.commit.message?.split('\n')[0] ?? '')
-  }))
+  const allCommits = await Promise.all(
+    paths.map(path =>
+      octokit.paginate(octokit.rest.repos.listCommits, {
+        sha: github.branch,
+        owner: github.owner,
+        repo: github.name,
+        path,
+        since: github.since,
+        per_page: github.per_page,
+        until: github.until,
+        author
+      })
+    )
+  )
+
+  const uniqueCommits = new Map<string, { sha: string, date: string, message: string }>()
+  for (const commits of allCommits) {
+    for (const commit of commits) {
+      if (!uniqueCommits.has(commit.sha)) {
+        uniqueCommits.set(commit.sha, {
+          sha: commit.sha,
+          date: commit.commit.author?.date ?? '',
+          message: (commit.commit.message?.split('\n')[0] ?? '')
+        })
+      }
+    }
+  }
+
+  return Array.from(uniqueCommits.values()).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
 }, {
   maxAge: 60 * 60,
   getKey: (event) => {
     const { path, author } = getQuery(event)
-    return `commits-${path}${author ? `-${author}` : ''}`
+    const paths = Array.isArray(path) ? path : [path]
+    return `commits-${paths.join(',')}${author ? `-${author}` : ''}`
   }
 })