@movk/nuxt-docs 1.4.0 → 1.4.2

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

@@ -34,7 +34,12 @@ export default defineAppConfig({
       }
     }
   },
+  vercelAnalytics: {
+    enable: false,
+    debug: 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()
@@ -43,6 +45,8 @@ provide('navigation', rootNavigation)
 <template>
   <UApp :toaster="appConfig.toaster">
     <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
+    <Analytics v-if="appConfig.vercelAnalytics" :debug="appConfig.vercelAnalytics?.debug" />
+    <SpeedInsights v-if="appConfig.vercelAnalytics" :debug="appConfig.vercelAnalytics?.debug" />
 
     <div :class="{ root: route.path.startsWith('/docs/') }">
       <template v-if="!route.path.startsWith('/examples')">

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?.debug) 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?.debug) 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?.debug) 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?.debug) track('Page Action', { action: 'Open in Claude' })
+    }
   }
 ]
 
 async function copyPage() {
+  if (vercelAnalytics?.debug) track('Page Action', { action: 'Copy Page Content' })
   copy(await $fetch<string>(`/raw${route.path}.md`))
 }
 </script>

package/app/components/header/HeaderLogo.vue

@@ -1,5 +1,9 @@
+<script lang="ts" setup>
+const { header } = useAppConfig()
+</script>
+
 <template>
-  <NuxtLink to="/">
-    <UUser :avatar="{ src: 'https://docs.mhaibaraai.cn/avatar.png' }" name="Movk Nuxt Docs" />
+  <NuxtLink :to="header.to">
+    <UUser :avatar="{ src: header.avatar }" :name="header.title" />
   </NuxtLink>
 </template>

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

@@ -8,6 +8,16 @@ const appConfig = useAppConfig()
 const colorMode = useColorMode()
 const site = useSiteConfig()
 
+const { track } = useAnalytics()
+
+const open = ref(false)
+
+watch(open, (isOpen) => {
+  if (isOpen && appConfig.vercelAnalytics?.debug) {
+    track('Theme Picker Opened')
+  }
+})
+
 const { copy: copyCSS, copied: copiedCSS } = useClipboard()
 const { copy: copyAppConfig, copied: copiedAppConfig } = useClipboard()
 
@@ -19,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?.debug) track('Theme Changed', { setting: 'neutral', value: option })
   }
 })
 
@@ -32,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?.debug) track('Theme Changed', { setting: 'primary', value: option })
   }
 })
 
@@ -43,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?.debug) track('Theme Changed', { setting: 'radius', value: option })
   }
 })
 
@@ -57,12 +70,14 @@ const mode = computed({
   },
   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']
@@ -73,6 +88,7 @@ const font = computed({
   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 })
   }
 })
 
@@ -97,6 +113,7 @@ const icon = computed({
     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 })
   }
 })
 
@@ -113,6 +130,8 @@ const hasAppConfigChanges = computed(() => {
 })
 
 function exportCSS() {
+  if (appConfig.vercelAnalytics?.debug) track('Theme Exported', { type: 'css' })
+
   const lines = [
     '@import "tailwindcss";',
     '@import "@nuxt/ui";'
@@ -142,6 +161,8 @@ function exportCSS() {
 }
 
 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') {
@@ -171,25 +192,33 @@ function exportAppConfig() {
 }
 
 function resetTheme() {
-  primary.value = 'green'
-  neutral.value = 'slate'
-  radius.value = 0.25
-  font.value = 'Public Sans'
-  icon.value = 'lucide'
-  setBlackAsPrimary(false)
+  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`)
 }
 </script>
 
 <template>
-  <UPopover :ui="{ content: 'w-72 px-6 py-4 flex flex-col gap-4 overflow-y-auto max-h-[calc(100vh-5rem)]' }">
-    <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"

package/app/composables/useAnalytics.ts

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

package/app/types/index.d.ts

@@ -2,6 +2,10 @@ import type { ButtonProps } from '@nuxt/ui'
 
 declare module 'nuxt/schema' {
   interface AppConfig {
+    vercelAnalytics: {
+      enable: boolean
+      debug: boolean
+    }
     seo: {
       titleTemplate: string
       title: string
@@ -9,6 +13,7 @@ declare module 'nuxt/schema' {
     }
     header: {
       title: string
+      avatar: string
       to: string
       search: boolean
       colorMode: boolean
@@ -36,12 +41,12 @@ declare module 'nuxt/schema' {
       suffix: string
       per_page: number
       until: string
-      author?: string
+      author: string
       /**
        * 日期格式化配置
        * @example { locale: 'zh-CN', options: { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' } }
        */
-      dateFormat?: {
+      dateFormat: {
         locale?: string
         options?: Intl.DateTimeFormatOptions
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@movk/nuxt-docs",
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "private": false,
   "description": "An elegant documentation theme for Nuxt, powered by Nuxt UI and Nuxt Content.",
   "author": "YiXuan <mhaibaraai@gmail.com>",
@@ -37,6 +37,8 @@
     "@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",