@movk/nuxt-docs 1.1.0

package/README.md

@@ -0,0 +1,265 @@
+[![Movk Nuxt Docs](https://docs.mhaibaraai.cn/__og-image__/static/og.png)](https://docs.mhaibaraai.cn/)
+
+> 一款由 Nuxt UI 和 Nuxt Content 强力驱动的优雅文档主题
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+使用此主题可以快速构建美观、专业的文档网站，内置内容管理、SEO、暗黑模式、全文搜索等功能。
+
+- 📖 [在线文档](https://docs.mhaibaraai.cn/)
+
+## ✨ 特性
+
+此主题集成了一系列旨在优化文档管理体验的强大功能：
+
+- ⚡ **基于 Nuxt 4** - 充分利用最新的 Nuxt 框架，实现卓越性能
+- 🎨 **采用 Nuxt UI** - 集成全面的 UI 组件库，开箱即用
+- 📝 **MDC 语法增强** - 支持 Markdown 与 Vue 组件的无缝集成，实现动态内容
+- 🧩 **组件文档自动生成** - 自动生成 Props、Slots、Emits 文档及交互式示例
+- 📚 **智能侧边栏导航** - 根据内容结构自动生成导航
+- 🔍 **全文搜索** - 内置强大的全文搜索功能
+- 🌙 **暗黑模式** - 支持亮色/暗色主题切换
+- 📱 **响应式设计** - 移动优先的响应式布局
+- 🚀 **SEO 优化** - 内置 SEO 优化功能
+- 🎯 **TypeScript 支持** - 完整的 TypeScript 类型支持
+- 🤖 **AI 助手优化** - 为 LLM 优化，提供更好的 AI 辅助文档体验
+
+## 🚀 快速开始
+
+### 使用模板创建项目
+
+```bash
+# 使用此模板创建新项目
+npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/template my-docs
+
+# 进入项目目录
+cd my-docs
+
+# 启动开发服务器
+pnpm dev
+```
+
+### 作为 Layer 使用
+
+在现有 Nuxt 项目中使用 Movk Nuxt Docs 作为 layer：
+
+```bash
+# 安装依赖
+pnpm add @movk/nuxt-docs better-sqlite3
+```
+
+在 CSS 中导入 Tailwind CSS 和 Nuxt UI
+
+```css [~/assets/css/main.css]
+@import 'tailwindcss';
+@import '@nuxt/ui';
+```
+
+在 `nuxt.config.ts` 中配置：
+
+```ts
+export default defineNuxtConfig({
+  extends: ['@movk/nuxt-docs'],
+  css: ['~/assets/css/main.css'],
+  llms: {
+    domain: 'https://docs.mhaibaraai.cn',
+    title: 'Movk Nuxt Docs',
+    description: '一款优雅的 Nuxt 文档主题'
+  }
+})
+```
+
+## 📁 项目结构
+
+### 完整项目结构
+
+使用模板创建的项目结构：
+
+```bash
+my-docs/
+├── app/assets/css/main.css             # 全局样式
+├── content/             # Markdown 内容
+│   ├── index.md         # 首页
+│   └── docs/            # 文档页面
+├── public/              # 静态资源
+├── nuxt.config.ts       # Nuxt 配置
+├── tsconfig.json        # TypeScript 配置
+├── package.json         # 依赖与脚本
+├── .npmrc               # npm 配置
+├── pnpm-workspace.yaml   # pnpm 工作区配置
+└── README.md             # 项目说明
+```
+
+### Monorepo 结构
+
+本项目采用 monorepo 结构：
+
+- `/docs` - 官方文档站点
+- `/layer` - Movk Nuxt Docs 主题 layer（`@movk/nuxt-docs`）
+- `/template` - 项目模板
+- `/scripts` - 构建脚本
+
+## 📝 内容编写
+
+### 基础 Markdown
+
+```md
+---
+title: 页面标题
+description: 页面描述
+---
+
+# 标题
+
+这是一段普通的文本内容。
+
+## 二级标题
+
+- 列表项 1
+- 列表项 2
+```
+
+### MDC 语法
+
+```md
+::card
+---
+title: 卡片标题
+icon: i-lucide-rocket
+---
+卡片内容
+::
+```
+
+了解更多关于 MDC 语法，请查看 [Nuxt Content 文档](https://content.nuxt.com/docs/files/markdown#mdc-syntax)。
+
+## 🔌 集成第三方服务
+
+本主题不内置任何分析或监控工具，你可以根据需求自由选择。
+
+### Vercel Analytics
+
+```bash
+pnpm add @vercel/analytics @vercel/speed-insights
+```
+
+创建 `app/plugins/analytics.client.ts`：
+
+```typescript
+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/)
+- **Plausible** - [vue-plausible](https://github.com/moritzsternemann/vue-plausible)
+- **Umami** - [nuxt-umami](https://github.com/ijkml/nuxt-umami)
+
+按照各工具的 Nuxt 集成文档在 `plugins` 目录中创建插件即可。
+
+## 🛠️ 开发
+
+### 本地开发
+
+```bash
+# 克隆项目
+git clone https://github.com/mhaibaraai/movk-nuxt-docs.git
+
+# 进入项目目录
+cd movk-nuxt-docs
+
+# 安装依赖
+pnpm install
+
+# 启动开发服务器
+pnpm dev
+```
+
+开发服务器将在 `http://localhost:3000` 启动。
+
+### 构建生产版本
+
+```bash
+# 构建应用
+pnpm build
+
+# 本地预览生产构建
+pnpm preview
+```
+
+### 发布
+
+```bash
+# 发布 layer 到 npm
+pnpm release:layer
+
+# 发布完整项目
+pnpm release
+```
+
+## ⚡ 技术栈
+
+本项目基于以下优秀的开源项目构建：
+
+- [Nuxt 4](https://nuxt.com/) - Web 框架
+- [Nuxt Content](https://content.nuxt.com/) - 基于文件的 CMS
+- [Nuxt UI](https://ui.nuxt.com/) - UI 组件库
+- [Nuxt Image](https://image.nuxt.com/) - 图片优化
+- [Tailwind CSS 4](https://tailwindcss.com/) - CSS 框架
+- [Nuxt SEO](https://nuxtseo.com/) - SEO 优化
+- [Nuxt LLMs](https://github.com/nuxt/llms) - AI 助手优化
+
+## 📖 文档
+
+访问 [Movk Nuxt Docs 文档](https://docs.mhaibaraai.cn/) 了解详细的使用指南和 API 文档。
+
+## 🙏 致谢
+
+本项目基于以下优秀项目构建或受其启发：
+
+- [Docus](https://docus.dev/) - 由 Nuxt Content 团队开发的文档主题
+- [Nuxt UI Docs Template](https://docs-template.nuxt.dev/) - Nuxt UI 官方文档模板
+
+## 📄 许可证
+
+[MIT](./LICENSE) License © 2024-PRESENT [YiXuan](https://github.com/mhaibaraai)
+
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@movk/nuxt-docs/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/@movk/nuxt-docs
+[npm-downloads-src]: https://img.shields.io/npm/dm/@movk/nuxt-docs.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/@movk/nuxt-docs
+[license-src]: https://img.shields.io/badge/License-MIT-blue.svg
+[license-href]: https://npmjs.com/package/@movk/nuxt-docs
+[nuxt-src]: https://img.shields.io/badge/Nuxt-4-00DC82?logo=nuxt.js&logoColor=fff
+[nuxt-href]: https://nuxt.com

package/app/app.config.ts

@@ -0,0 +1,53 @@
+import type { ButtonProps } from '@nuxt/ui'
+
+export default defineAppConfig({
+  toaster: {
+    expand: true,
+    position: 'top-right' as const,
+    duration: 3000,
+    max: 5
+  },
+  theme: {
+    radius: 0.25,
+    blackAsPrimary: false
+  },
+  ui: {
+    colors: {
+      primary: 'indigo',
+      neutral: 'zinc'
+    },
+    contentNavigation: {
+      slots: {
+        linkLeadingIcon: 'size-4 mr-1',
+        linkTrailing: 'hidden'
+      },
+      defaultVariants: {
+        variant: 'link'
+      }
+    },
+    pageLinks: {
+      slots: {
+        linkLeadingIcon: 'size-4',
+        linkLabelExternalIcon: 'size-2.5'
+      }
+    }
+  },
+  header: {
+    title: 'Movk Nuxt Docs',
+    to: '/',
+    search: true,
+    colorMode: true,
+    links: [] as ButtonProps[]
+  },
+  footer: {
+    credits: `Copyright © 2024 - ${new Date().getFullYear()}`,
+    socials: [] as ButtonProps[]
+  },
+  toc: {
+    title: '页面导航',
+    bottom: {
+      title: '社区',
+      links: [] as ButtonProps[]
+    }
+  }
+})

package/app/app.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import colors from 'tailwindcss/colors'
+
+const site = useSiteConfig()
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+const route = useRoute()
+
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs', ['category', 'description']))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+  server: false
+})
+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 {}')
+
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { key: 'theme-color', name: 'theme-color', content: color }
+  ],
+  style: [
+    { innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
+    { innerHTML: blackAsPrimary, id: 'nuxt-ui-black-as-primary', tagPriority: -2 }
+  ]
+})
+
+useSeoMeta({
+  titleTemplate: appConfig.seo.titleTemplate,
+  title: appConfig.seo.title,
+  description: appConfig.seo.description,
+  ogSiteName: site.name,
+  twitterCard: 'summary_large_image'
+})
+
+const { rootNavigation } = useNavigation(navigation)
+
+provide('navigation', rootNavigation)
+</script>
+
+<template>
+  <UApp :toaster="appConfig.toaster">
+    <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
+
+    <div :class="[route.path.startsWith('/docs/') && 'root']">
+      <template v-if="!route.path.startsWith('/examples')">
+        <Header />
+      </template>
+
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+
+      <template v-if="!route.path.startsWith('/examples')">
+        <Footer />
+
+        <ClientOnly>
+          <LazyUContentSearch :files="files" :navigation="navigation" />
+        </ClientOnly>
+      </template>
+    </div>
+  </UApp>
+</template>
+
+<style>
+/* Safelist (do not remove): [&>div]:*:my-0 [&>div]:*:w-full h-64 !px-0 !py-0 !pt-0 !pb-0 !p-0 !justify-start !justify-end !min-h-96 h-136 max-h-[341px] */
+
+@media (min-width: 1024px) {
+  .root {
+    --ui-header-height: 112px;
+  }
+}
+</style>

package/app/components/AdsCarbon.vue

@@ -0,0 +1,3 @@
+<template>
+  <div />
+</template>

package/app/components/Footer.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const route = useRoute()
+const { footer } = useAppConfig()
+</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>
+      <MDC v-if="footer?.credits" :value="footer.credits" unwrap="p" />
+    </template>
+
+    <template #right>
+      <template v-if="footer.socials?.length">
+        <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>
+    </template>
+  </UFooter>
+</template>

package/app/components/PageHeaderLinks.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+const route = useRoute()
+const toast = useToast()
+const { copy, copied } = useClipboard()
+const site = useSiteConfig()
+
+const mdPath = computed(() => `${site.url}/raw${route.path}.md`)
+
+const items = [
+  {
+    label: 'Copy Markdown link',
+    icon: 'i-lucide-link',
+    onSelect() {
+      copy(mdPath.value)
+      toast.add({
+        title: 'Copied to clipboard',
+        icon: 'i-lucide-check-circle'
+      })
+    }
+  },
+  {
+    label: 'View as Markdown',
+    icon: 'i-simple-icons:markdown',
+    target: '_blank',
+    to: `/raw${route.path}.md`
+  },
+  {
+    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.`)}`
+  },
+  {
+    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.`)}`
+  }
+]
+
+async function copyPage() {
+  copy(await $fetch<string>(`/raw${route.path}.md`))
+}
+</script>
+
+<template>
+  <UFieldGroup size="sm">
+    <UButton
+      label="Copy page"
+      :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+      color="neutral"
+      variant="outline"
+      :ui="{
+        leadingIcon: [copied ? 'text-primary' : 'text-neutral', 'size-3.5']
+      }"
+      @click="copyPage"
+    />
+    <UDropdownMenu
+      size="sm"
+      :items="items"
+      :content="{
+        align: 'end',
+        side: 'bottom',
+        sideOffset: 8
+      }"
+      :ui="{
+        content: 'w-48'
+      }"
+    >
+      <UButton icon="i-lucide-chevron-down" color="neutral" variant="outline" />
+    </UDropdownMenu>
+  </UFieldGroup>
+</template>

package/app/components/StarsBg.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { kebabCase } from 'scule'
+
+interface Star {
+  x: number
+  y: number
+  size: number
+}
+
+const { starCount = 300, color = 'var(--ui-primary)', size = { min: 1, max: 2 } } = defineProps<{
+  starCount?: number
+  color?: string
+  size?: { min: number, max: number }
+}>()
+
+const route = useRoute()
+
+// Generate random star positions and sizes
+function generateStars(count: number): Star[] {
+  return Array.from({ length: count }, () => ({
+    x: Math.floor(Math.random() * 2000),
+    y: Math.floor(Math.random() * 2000),
+    size: typeof size === 'number'
+      ? size
+      : Math.random() * (size.max - size.min) + size.min
+  }))
+}
+
+// Define speed configurations once
+const speedMap = {
+  slow: { duration: 200, opacity: 0.5, ratio: 0.3 },
+  normal: { duration: 150, opacity: 0.75, ratio: 0.3 },
+  fast: { duration: 100, opacity: 1, ratio: 0.4 }
+}
+
+// Use a more efficient approach to generate and store stars
+const stars = useState<{ slow: Star[], normal: Star[], fast: Star[] }>(`${kebabCase(route.path)}-stars`, () => {
+  return {
+    slow: generateStars(Math.floor(starCount * speedMap.slow.ratio)),
+    normal: generateStars(Math.floor(starCount * speedMap.normal.ratio)),
+    fast: generateStars(Math.floor(starCount * speedMap.fast.ratio))
+  }
+})
+
+// Compute star layers with different speeds and opacities
+const starLayers = computed(() => [
+  { stars: stars.value.fast, ...speedMap.fast },
+  { stars: stars.value.normal, ...speedMap.normal },
+  { stars: stars.value.slow, ...speedMap.slow }
+])
+</script>
+
+<template>
+  <div class="absolute pointer-events-none z-[-1] inset-y-0 inset-x-5 sm:inset-x-7 lg:inset-x-9 overflow-hidden">
+    <div class="stars size-full absolute inset-x-0 top-0">
+      <div
+        v-for="(layer, index) in starLayers"
+        :key="index"
+        class="star-layer"
+        :style="{
+          '--star-duration': `${layer.duration}s`,
+          '--star-opacity': layer.opacity,
+          '--star-color': color
+        }"
+      >
+        <div
+          v-for="(star, starIndex) in layer.stars"
+          :key="starIndex"
+          class="star absolute rounded-full"
+          :style="{
+            left: `${star.x}px`,
+            top: `${star.y}px`,
+            width: `${star.size}px`,
+            height: `${star.size}px`,
+            backgroundColor: 'var(--star-color)',
+            opacity: 'var(--star-opacity)'
+          }"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.stars {
+  left: 50%;
+  transform: translate(-50%);
+  -webkit-mask-image: linear-gradient(
+    180deg,
+    rgba(217, 217, 217, 0) 0%,
+    rgba(217, 217, 217, 0.8) 25%,
+    #d9d9d9 50%,
+    rgba(217, 217, 217, 0.8) 75%,
+    rgba(217, 217, 217, 0) 100%
+  );
+  mask-image: linear-gradient(
+    180deg,
+    rgba(217, 217, 217, 0) 0%,
+    rgba(217, 217, 217, 0.8) 25%,
+    #d9d9d9 50%,
+    rgba(217, 217, 217, 0.8) 75%,
+    rgba(217, 217, 217, 0) 100%
+  );
+  -webkit-mask-size: cover;
+  mask-size: cover;
+}
+
+.star-layer {
+  animation: risingStarsAnimation linear infinite;
+  animation-duration: var(--star-duration);
+  will-change: transform;
+}
+
+@keyframes risingStarsAnimation {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-2000px);
+  }
+}
+</style>

package/app/components/content/ComponentEmits.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { camelCase } from 'scule'
+
+const props = defineProps<{
+  /**
+   * The slug of the component to fetch emits for.
+   * @defaultValue route path's last segment
+   */
+  slug?: string
+}>()
+
+const route = useRoute()
+const componentName = camelCase(props.slug ?? route.path.split('/').pop() ?? '')
+
+const meta = await fetchComponentMeta(componentName as any)
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh>
+          Event
+        </ProseTh>
+        <ProseTh>
+          Type
+        </ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="event in (meta?.meta?.events || [])" :key="event.name">
+        <ProseTd>
+          <ProseCode>
+            {{ event.name }}
+          </ProseCode>
+        </ProseTd>
+        <ProseTd>
+          <HighlightInlineType v-if="event.type" :type="event.type" />
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>