@movk/nuxt-docs 1.12.0 → 1.12.2

package/README.md

@@ -0,0 +1,316 @@
+[![Movk Nuxt Docs](https://docs.mhaibaraai.cn/og-image.png)](https://docs.mhaibaraai.cn/)
+
+> 基于 Nuxt 4 的现代文档主题，集成组件自动化文档、AI 聊天助手、MCP Server 和完整的开发者体验优化
+
+[![Install MCP in Cursor](https://docs.mhaibaraai.cn/mcp/badge.svg)](https://docs.mhaibaraai.cn/mcp/deeplink)
+[![Install MCP in VS Code](https://docs.mhaibaraai.cn/mcp/badge.svg?ide=vscode)](https://docs.mhaibaraai.cn/mcp/deeplink?ide=vscode)
+
+[![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]
+
+使用此主题可以快速构建美观、专业、智能的文档网站，内置组件文档自动生成、AI 聊天助手、MCP Server 支持、SEO 优化、暗黑模式、全文搜索等功能。
+
+- 📖 [在线文档](https://docs.mhaibaraai.cn/)
+
+## ✨ 特性
+
+此主题集成了一系列旨在优化文档管理体验的强大功能：
+
+### 🤖 AI 增强体验
+
+<div style="padding: 40px 0; display: flex; justify-content: center;">
+  <img src="https://docs.mhaibaraai.cn/ai/AiChat.png" alt="AiChat" width="400">
+</div>
+
+- **AI 聊天助手** - 内置智能文档助手，基于 Vercel AI SDK 支持多种 LLM 模型（Mistral、Qwen、OpenRouter）
+- **MCP Server 支持** - 集成 Model Context Protocol 服务器，为 AI 助手提供结构化的文档访问能力
+- **LLM 优化** - 通过 `nuxt-llms` 模块自动生成 `llms.txt` 和 `llms-full.txt`，为 AI 工具提供优化的文档索引
+- **流式响应** - 支持 AI 响应流式输出和代码高亮，配合 `shiki-stream` 实现实时语法高亮渲染
+
+### 🧩 自动化文档生成
+
+- **组件元数据自动提取** - 基于 `nuxt-component-meta` 自动提取 Vue 组件的 Props、Slots、Emits 定义
+- **交互式示例展示** - 通过 `ComponentExample` 组件自动加载和渲染组件示例，支持代码高亮和实时预览
+- **Git 提交历史集成** - 使用 `CommitChangelog` 和 `PageLastCommit` 组件自动展示文件的提交历史记录
+- **类型定义高亮** - 智能解析 TypeScript 类型定义，支持内联类型高亮和类型导航
+
+### 🎨 开发者体验
+
+- ⚡ **基于 Nuxt 4** - 充分利用最新的 Nuxt 框架，实现卓越性能
+- 🎨 **采用 Nuxt UI** - 集成全面的 UI 组件库，开箱即用
+- 📝 **MDC 语法增强** - 支持 Markdown 与 Vue 组件的无缝集成
+- 📊 **Mermaid 图表** - 内置 Mermaid 支持，渲染流程图、时序图、类图等可视化图表，支持自动主题切换和全屏查看
+- 🔍 **全文搜索** - 基于 Nuxt Content 的 `ContentSearch` 组件，支持键盘快捷键（⌘K）
+- 🌙 **暗黑模式** - 支持亮色/暗色主题切换
+- 📱 **响应式设计** - 移动优先的响应式布局
+- 🚀 **SEO 优化** - 内置 SEO 优化功能
+- 🎯 **TypeScript 支持** - 完整的 TypeScript 类型支持
+
+## 🚀 快速开始
+
+### 使用模板创建项目
+
+根据您的需求选择合适的模板：
+
+#### 📚 完整文档站点（推荐）
+
+适合构建完整的文档网站，包含 ESLint、TypeScript 检查等开发工具。
+
+```bash
+# 使用完整模板创建新项目
+npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/templates/default my-docs
+cd my-docs
+pnpm dev
+```
+
+#### 📦 模块文档站点（精简）
+
+适合为 npm 包或库快速创建文档，内置 Release 页面展示版本发布历史，无额外开发工具。
+
+```bash
+# 使用模块模板创建新项目
+npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/templates/module my-module-docs
+cd my-module-docs
+pnpm dev
+```
+
+访问 `http://localhost:3000` 查看你的文档网站。
+
+### AI 助手 Skill
+
+为你的 AI 助手（Cursor、Claude Code 等）添加 Movk Nuxt Docs 专业知识，加速文档编写：
+
+```bash
+npx skills add mhaibaraai/movk-nuxt-docs
+```
+
+此 Skill 为 AI 助手提供 Movk Nuxt Docs 专业知识，帮助你更高效地编写文档：
+
+- 📝 MDC 组件用法和现成模板
+- 🎨 中文文档写作规范和内容结构模式
+- 🔧 nuxt.config.ts 和 app.config.ts 配置参考
+- 📚 入门页、功能介绍页等常用页面模板
+
+### 作为 Layer 使用
+
+在现有 Nuxt 项目中使用 Movk Nuxt Docs 作为 layer：
+
+```bash [Terminal]
+pnpm add @movk/nuxt-docs better-sqlite3 tailwindcss
+```
+
+在 `nuxt.config.ts` 中配置：
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
++  extends: ['@movk/nuxt-docs']
+})
+```
+
+## 📁 项目结构
+
+### 模板项目结构
+
+使用模板创建的项目结构（以 `default` 模板为例）：
+
+```bash
+my-docs/
+├── app/
+│   └── composables/             # 自定义 Composables
+├── content/                     # Markdown 内容
+│   ├── index.md                 # 首页
+│   └── docs/                    # 文档页面
+├── public/                      # 静态资源
+├── nuxt.config.ts               # Nuxt 配置
+├── tsconfig.json                # TypeScript 配置
+├── package.json                 # 依赖与脚本
+├── .env.example                # 环境变量示例
+└── pnpm-workspace.yaml          # pnpm 工作区配置
+```
+
+### Monorepo 结构
+
+本仓库采用 monorepo 结构：
+
+```bash
+movk-nuxt-docs/
+├── docs/                        # 官方文档站点
+├── layer/                       # @movk/nuxt-docs layer 包
+├── templates/
+│   ├── default/                 # 完整文档站点模板
+│   └── module/                  # 模块文档站点模板（精简）
+└── scripts/                     # 构建脚本
+```
+
+## 📝 内容编写
+
+### 基础 Markdown
+
+```md [md]
+---
+title: 页面标题
+description: 页面描述
+---
+
+# 标题
+
+这是一段普通的文本内容。
+
+## 二级标题
+
+- 列表项 1
+- 列表项 2
+```
+
+### MDC 语法
+
+```md [md]
+::card
+---
+title: 卡片标题
+icon: i-lucide-rocket
+---
+卡片内容
+::
+```
+
+了解更多关于 MDC 语法，请查看 [Nuxt Content 文档](https://content.nuxt.com/docs/files/markdown#mdc-syntax)。
+
+### Mermaid 图表
+
+使用 ` ```mermaid ` 代码块渲染可视化图表，支持流程图、时序图、类图等多种图表类型：
+
+````md [md]
+```mermaid
+graph TD
+    A[开始] --> B{是否有效?}
+    B -->|是| C[处理数据]
+    B -->|否| D[显示错误]
+    C --> E[完成]
+    D --> E
+```
+````
+
+**主要特性：**
+- 🎨 自动主题切换（深色/浅色模式）
+- 🔄 懒加载（仅在可见时渲染）
+- 📋 一键复制图表代码
+- 🖼️ 全屏查看功能
+- 🔒 安全渲染（DOMPurify 清理）
+
+**支持的图表类型：**
+- **流程图**（`flowchart`/`graph`）：用于展示流程和决策
+  ![Mermaid 流程图示例](https://docs.mhaibaraai.cn/mermaid/mermaid-flowchart.png)
+- **时序图**（`sequenceDiagram`）：用于展示交互时序
+  ![Mermaid 时序图示例](https://docs.mhaibaraai.cn/mermaid/mermaid-sequence.png)
+- **类图**（`classDiagram`）：用于展示类关系
+- **状态图**（`stateDiagram`）：用于展示状态转换
+- **甘特图**（`gantt`）：用于展示项目时间线
+- **饼图**（`pie`）：用于展示数据占比
+- **Git 图**（`gitGraph`）：用于展示分支历史
+- 以及更多 [Mermaid 支持的图表类型](https://mermaid.js.org/intro/)
+
+**带文件名的图表：**
+
+````md [md]
+```mermaid [auth-flow.mmd]
+sequenceDiagram
+    participant U as 用户
+    participant A as 认证服务
+    participant D as 数据库
+    U->>A: 登录请求
+    A->>D: 验证凭证
+    D-->>A: 返回用户信息
+    A-->>U: 返回 Token
+```
+````
+
+## 🛠️ 开发
+
+### 本地开发
+
+```bash [Terminal]
+# 克隆项目
+git clone https://github.com/mhaibaraai/movk-nuxt-docs.git
+# 进入项目目录
+cd movk-nuxt-docs
+# 安装依赖
+pnpm install
+# 启动开发服务器
+pnpm dev
+```
+
+开发服务器将在 `http://localhost:3000` 启动。
+
+### 构建生产版本
+
+```bash [Terminal]
+# 构建应用
+pnpm build
+# 本地预览生产构建
+pnpm preview
+```
+
+### 发布
+
+```bash [Terminal]
+# 发布 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 组件库
+- [Tailwind CSS 4](https://tailwindcss.com/) - CSS 框架
+
+### AI 集成
+
+- [Vercel AI SDK](https://sdk.vercel.ai/) - AI 集成框架
+- [Nuxt LLMs](https://github.com/nuxt-content/nuxt-llms) - LLM 优化
+- [@nuxtjs/mcp-toolkit](https://github.com/nuxt-modules/mcp-toolkit) - MCP Server 支持
+- [Shiki](https://shiki.style/) - 代码语法高亮
+- [Shiki Stream](https://github.com/antfu/shiki-stream) - 流式代码高亮
+
+### 功能增强
+
+- [Nuxt Component Meta](https://github.com/nuxt-content/nuxt-component-meta) - 组件元数据提取
+- [Nuxt Image](https://image.nuxt.com/) - 图片优化
+- [Nuxt SEO](https://nuxtseo.com/) - SEO 优化
+- [Octokit](https://github.com/octokit/rest.js) - GitHub API 集成
+
+## 📖 文档
+
+访问 [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

@@ -108,7 +108,8 @@ export default defineAppConfig({
       streaming: 'i-lucide-chevron-down',
       providers: {
         deepseek: 'i-ri-deepseek-fill',
-        alibaba: 'i-simple-icons-alibabacloud'
+        alibaba: 'i-simple-icons-alibabacloud',
+        zai: 'i-simple-icons:zig'
       }
     }
   }

package/app/app.vue

@@ -64,8 +64,8 @@ provide('navigation', rootNavigation)
         <ClientOnly>
           <LazyUContentSearch :files="files" :navigation="rootNavigation" :fuse="{ resultLimit: 1000 }" />
           <template v-if="isAiChatEnabled">
-            <LazyAiChatFloatingInput />
             <LazyAiChatPanel />
+            <LazyAiChatFloatingInput />
           </template>
         </ClientOnly>
       </template>

package/app/assets/css/main.css

@@ -22,19 +22,3 @@
 :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/modules/ai-chat/index.ts

@@ -32,7 +32,7 @@ export interface AiChatModuleOptions {
   models?: string[]
 }
 
-const log = logger.withTag('movk-nuxt-docs:ai-assistant')
+const log = logger.withTag('movk-nuxt-docs')
 
 export default defineNuxtModule<AiChatModuleOptions>({
   meta: {
@@ -77,7 +77,7 @@ export default defineNuxtModule<AiChatModuleOptions>({
     }
 
     if (!hasApiKey) {
-      log.warn('[ai-chat] Module disabled: no API key found in environment variables.')
+      log.warn('[movk-nuxt-docs] Ai Chat Module disabled: no API key found in environment variables.')
       return
     }
 
@@ -119,7 +119,7 @@ export default defineNuxtModule<AiChatModuleOptions>({
         handler: resolve('./runtime/server/api/ai-chat')
       })
     } else {
-      log.info(`[ai-chat] Using custom handler, skipping default handler registration`)
+      log.info(`[movk-nuxt-docs] Using custom handler, skipping default handler registration`)
     }
   }
 })

package/modules/ai-chat/runtime/components/AiChatFloatingInput.vue

@@ -61,39 +61,48 @@ defineShortcuts(shortcuts)
       :animate="{ y: 0, opacity: 1 }"
       :exit="{ y: 100, opacity: 0 }"
       :transition="{ duration: 0.2, ease: 'easeOut' }"
-      class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 px-4"
+      class="fixed inset-x-0 z-10 px-4 sm:px-80 bottom-[max(1.5rem,env(safe-area-inset-bottom))]"
       style="will-change: transform"
     >
-      <form @submit.prevent="handleSubmit">
-        <UInput
-          ref="inputRef"
-          v-model="input"
-          :placeholder="aiChat.texts.placeholder"
-          size="lg"
-          :ui="{
-            root: 'w-72 py-0.5 focus-within:w-96 transition-all duration-300 ease-out',
-            base: 'bg-default/80 backdrop-blur-xl shadow-lg',
-            trailing: 'pe-2'
-          }"
-          @keydown.enter.exact.prevent="handleSubmit"
-        >
-          <template #trailing>
-            <div class="flex items-center gap-2">
-              <div class="hidden sm:!flex items-center gap-1">
-                <UKbd v-for="key in shortcutDisplayKeys" :key="key" :value="key" />
-              </div>
+      <form
+        class="flex w-full justify-center"
+        @submit.prevent="handleSubmit"
+      >
+        <div class="w-full max-w-96">
+          <UInput
+            ref="inputRef"
+            v-model="input"
+            :placeholder="aiChat.texts.placeholder"
+            size="lg"
+            maxlength="1000"
+            :ui="{
+              root: 'group w-full! min-w-0 sm:max-w-96 transition-all duration-300 ease-out [@media(hover:hover)]:hover:scale-105 [@media(hover:hover)]:focus-within:scale-105',
+              base: 'bg-default shadow-lg text-base',
+              trailing: 'pe-2'
+            }"
+            @keydown.enter.exact.prevent="handleSubmit"
+          >
+            <template #trailing>
+              <div class="flex items-center gap-2">
+                <div class="hidden sm:flex group-focus-within:hidden items-center gap-1">
+                  <UKbd
+                    v-for="key in shortcutDisplayKeys"
+                    :key="key"
+                    :value="key"
+                  />
+                </div>
 
-              <UButton
-                aria-label="Send Message"
-                type="submit"
-                icon="i-lucide-arrow-up"
-                color="primary"
-                size="xs"
-                :disabled="!input.trim()"
-              />
-            </div>
-          </template>
-        </UInput>
+                <UButton
+                  type="submit"
+                  icon="i-lucide-arrow-up"
+                  color="primary"
+                  size="xs"
+                  :disabled="!input.trim()"
+                />
+              </div>
+            </template>
+          </UInput>
+        </div>
       </form>
     </motion.div>
   </AnimatePresence>

package/modules/ai-chat/runtime/components/AiChatPanel.vue

@@ -121,13 +121,10 @@ onMounted(() => {
 <template>
   <DefineChatContent v-slot="{ showExpandButton = true }">
     <div class="flex h-full flex-col">
-      <div class="flex h-16 shrink-0 items-center justify-between border-b border-muted/50 px-4">
+      <div class="flex h-16 shrink-0 items-center justify-between border-b border-default px-4">
         <span class="font-medium text-highlighted">{{ aiChat.texts.title }}</span>
         <div class="flex items-center gap-1">
-          <UTooltip
-            v-if="showExpandButton"
-            :text="isExpanded ? aiChat.texts.collapse : aiChat.texts.expand"
-          >
+          <UTooltip v-if="showExpandButton" :text="isExpanded ? aiChat.texts.collapse : aiChat.texts.expand">
             <UButton
               :icon="isExpanded ? 'i-lucide-minimize-2' : 'i-lucide-maximize-2'"
               color="neutral"
@@ -138,10 +135,7 @@ onMounted(() => {
               @click="toggleExpanded"
             />
           </UTooltip>
-          <UTooltip
-            v-if="chat.messages.length > 0"
-            :text="aiChat.texts.clearChat"
-          >
+          <UTooltip v-if="chat.messages.length > 0" :text="aiChat.texts.clearChat">
             <UButton
               :icon="aiChat.icons.clearChat"
               color="neutral"
@@ -183,7 +177,11 @@ onMounted(() => {
                 v-for="(part, index) in message.parts"
                 :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`"
               >
-                <AiChatReasoning v-if="part.type === 'reasoning'" :text="part.text" :is-streaming="part.state !== 'done'" />
+                <AiChatReasoning
+                  v-if="part.type === 'reasoning'"
+                  :text="part.text"
+                  :is-streaming="part.state !== 'done'"
+                />
 
                 <MDCCached
                   v-else-if="part.type === 'text'"
@@ -217,19 +215,10 @@ onMounted(() => {
           </template>
         </UChatMessages>
 
-        <div
-          v-else
-          class="p-4"
-        >
-          <div
-            v-if="!faqQuestions?.length"
-            class="flex h-full flex-col items-center justify-center py-12 text-center"
-          >
+        <div v-else class="p-4">
+          <div v-if="!faqQuestions?.length" class="flex h-full flex-col items-center justify-center py-12 text-center">
             <div class="mb-4 flex size-12 items-center justify-center rounded-full bg-primary/10">
-              <UIcon
-                name="i-lucide-message-circle-question"
-                class="size-6 text-primary"
-              />
+              <UIcon name="i-lucide-message-circle-question" class="size-6 text-primary" />
             </div>
             <h3 class="mb-2 text-base font-medium text-highlighted">
               {{ aiChat.texts.askAnything }}
@@ -253,17 +242,16 @@ onMounted(() => {
         <UChatPrompt
           v-model="input"
           :rows="2"
-          class="text-sm"
-          variant="subtle"
           :placeholder="aiChat.texts.placeholder"
+          maxlength="1000"
           :ui="{
             root: 'shadow-none!',
-            body: '*:p-0! *:rounded-none!'
+            body: '*:p-0! *:rounded-none! *:text-sm!'
           }"
           @submit="handleSubmit"
         >
           <template #footer>
-            <div class="hidden items-center divide-x divide-muted/50 sm:flex">
+            <div class="flex items-center gap-1 text-xs text-muted">
               <AiChatModelSelect v-model="model" />
               <div class="flex gap-1 justify-between items-center px-1 text-xs text-muted">
                 <span>{{ aiChat.texts.lineBreak }}</span>
@@ -281,22 +269,25 @@ onMounted(() => {
             />
           </template>
         </UChatPrompt>
+        <div class="mt-1 flex text-xs text-dimmed items-center justify-between">
+          <span>刷新时聊天会被清除</span>
+          <span>
+            {{ input.length }}/1000
+          </span>
+        </div>
       </div>
     </div>
   </DefineChatContent>
 
   <aside
     v-if="!isMobile"
-    class="fixed top-0 z-50 h-dvh overflow-hidden border-l border-muted/50 bg-default/95 backdrop-blur-xl transition-[right,width] duration-200 ease-linear will-change-[right,width]"
+    class="left-auto! fixed top-0 z-50 h-dvh overflow-hidden border-l border-default bg-default/95 backdrop-blur-xl transition-[right,width] duration-200 ease-linear will-change-[right,width]"
     :style="{
       width: `${panelWidth}px`,
       right: isOpen ? '0' : `-${panelWidth}px`
     }"
   >
-    <div
-      class="h-full transition-[width] duration-200 ease-linear"
-      :style="{ width: `${panelWidth}px` }"
-    >
+    <div class="h-full transition-[width] duration-200 ease-linear" :style="{ width: `${panelWidth}px` }">
       <ReuseChatContent :show-expand-button="true" />
     </div>
   </aside>
@@ -304,8 +295,6 @@ onMounted(() => {
   <USlideover
     v-else
     v-model:open="isOpen"
-    title=" "
-    description=" "
     side="right"
     :ui="{
       content: 'ring-0 bg-default'

package/modules/ai-chat/runtime/composables/useHighlighter.ts

@@ -1,16 +1,28 @@
-import { createHighlighter } from 'shiki'
-import type { HighlighterGeneric } from 'shiki'
-import { createJavaScriptRegexEngine } from 'shiki/engine-javascript.mjs'
+import { createHighlighterCore } from '@shikijs/core'
+import type { HighlighterCore } from '@shikijs/core'
+import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript'
 
-let highlighter: HighlighterGeneric<any, any> | null = null
-
-let promise: Promise<HighlighterGeneric<any, any>> | null = null
+let highlighter: HighlighterCore | null = null
+let promise: Promise<HighlighterCore> | 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'],
+    promise = createHighlighterCore({
+      langs: [
+        import('@shikijs/langs/vue'),
+        import('@shikijs/langs/javascript'),
+        import('@shikijs/langs/typescript'),
+        import('@shikijs/langs/css'),
+        import('@shikijs/langs/html'),
+        import('@shikijs/langs/json'),
+        import('@shikijs/langs/yaml'),
+        import('@shikijs/langs/markdown'),
+        import('@shikijs/langs/bash')
+      ],
+      themes: [
+        import('@shikijs/themes/material-theme-palenight'),
+        import('@shikijs/themes/material-theme-lighter')
+      ],
       engine: createJavaScriptRegexEngine()
     })
   }

package/modules/config.ts

@@ -18,7 +18,8 @@ export default defineNuxtModule({
     const meta = await getPackageJsonMetadata(dir)
     const gitInfo = await getLocalGitInfo(dir) || getGitEnv()
 
-    const siteName = nuxt.options?.site?.name || meta.name || gitInfo?.name || ''
+    const site = nuxt.options.site
+    const siteName = (site && site.name) || meta.name || gitInfo?.name || ''
 
     nuxt.options.site = defu(nuxt.options.site, {
       url,

package/nuxt.config.ts

@@ -1,21 +1,20 @@
-import { defineNuxtConfig } from 'nuxt/config'
 import pkg from './package.json'
+import { createResolver } from '@nuxt/kit'
 
-// WASM runtime imports that Rollup should not attempt to resolve
-const WASM_EXTERNALS = ['env', 'wasi_snapshot_preview1']
-
-function mergeExternals(existing: unknown, additions: string[]): string[] {
-  if (Array.isArray(existing)) return [...existing, ...additions]
-  if (typeof existing === 'string') return [existing, ...additions]
-  return additions
-}
+const { resolve } = createResolver(import.meta.url)
 
 export default defineNuxtConfig({
   modules: [
+    resolve('./modules/config'),
+    resolve('./modules/routing'),
+    resolve('./modules/md-rewrite'),
+    resolve('./modules/component-example'),
+    resolve('./modules/css'),
     '@nuxt/ui',
     '@nuxt/content',
     '@nuxt/image',
     '@nuxt/a11y',
+    '@nuxtjs/robots',
     '@nuxtjs/mcp-toolkit',
     '@vueuse/nuxt',
     'nuxt-component-meta',
@@ -50,7 +49,8 @@ export default defineNuxtConfig({
 
   mdc: {
     highlight: {
-      noApiRoute: false
+      noApiRoute: false,
+      shikiEngine: 'javascript'
     }
   },
 
@@ -76,9 +76,22 @@ export default defineNuxtConfig({
       crawlLinks: true,
       failOnError: false,
       autoSubfolderIndex: false
+    },
+    compatibilityDate: {
+      // Don't generate observability routes for now
+      vercel: '2025-07-14'
+    }
+  },
+
+  vite: {
+    build: {
+      sourcemap: false,
+      chunkSizeWarningLimit: 1024
     }
   },
 
+  telemetry: false,
+
   hooks: {
     'vite:extendConfig': async (config) => {
       // Ensure optimizeDeps.include exists
@@ -103,28 +116,6 @@ export default defineNuxtConfig({
         '@movk/nuxt-docs > mermaid > d3',
         '@movk/nuxt-docs > mermaid > dompurify'
       )
-
-      // WASM plugin support for Shiki
-      const [wasm, topLevelAwait] = await Promise.all([
-        import('vite-plugin-wasm'),
-        import('vite-plugin-top-level-await')
-      ])
-      config.plugins!.push(wasm.default(), topLevelAwait.default() as any)
-
-      const build = config.build || ((config as any).build = {})
-      build.rollupOptions ??= {}
-      build.rollupOptions.external = mergeExternals(
-        build.rollupOptions.external,
-        WASM_EXTERNALS
-      )
-    },
-
-    'nitro:config': (nitroConfig) => {
-      nitroConfig.rollupConfig ??= {}
-      nitroConfig.rollupConfig.external = mergeExternals(
-        nitroConfig.rollupConfig.external,
-        WASM_EXTERNALS
-      )
     }
   },
 
@@ -156,12 +147,12 @@ 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 }
+      { name: 'DM Sans', provider: 'google' },
+      { name: 'Geist', provider: 'google' },
+      { name: 'Inter', provider: 'google' },
+      { name: 'Poppins', provider: 'google' },
+      { name: 'Outfit', provider: 'google' },
+      { name: 'Raleway', provider: 'google' }
     ]
   },
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@movk/nuxt-docs",
   "type": "module",
-  "version": "1.12.0",
+  "version": "1.12.2",
   "private": false,
   "description": "Modern Nuxt 4 documentation theme with auto-generated component docs, AI chat assistant, MCP server, and complete developer experience optimization.",
   "author": "YiXuan <mhaibaraai@gmail.com>",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@ai-sdk/gateway": "^3.0.39",
     "@ai-sdk/mcp": "^1.0.19",
-    "@ai-sdk/vue": "^3.0.77",
+    "@ai-sdk/vue": "^3.0.78",
     "@iconify-json/lucide": "^1.2.89",
     "@iconify-json/simple-icons": "^1.2.70",
     "@iconify-json/vscode-icons": "^1.2.40",
@@ -43,13 +43,18 @@
     "@nuxt/ui": "^4.4.0",
     "@nuxtjs/mcp-toolkit": "^0.6.3",
     "@nuxtjs/mdc": "^0.20.1",
+    "@nuxtjs/robots": "^5.7.0",
     "@octokit/rest": "^22.0.1",
-    "@openrouter/ai-sdk-provider": "^2.1.1",
+    "@openrouter/ai-sdk-provider": "^2.2.1",
+    "@shikijs/core": "^3.22.0",
+    "@shikijs/engine-javascript": "^3.22.0",
+    "@shikijs/langs": "^3.22.0",
+    "@shikijs/themes": "^3.22.0",
     "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
     "@vueuse/core": "^14.2.0",
     "@vueuse/nuxt": "^14.2.0",
-    "ai": "^6.0.77",
+    "ai": "^6.0.78",
     "defu": "^6.1.4",
     "dompurify": "^3.3.1",
     "exsolve": "^1.0.8",
@@ -58,7 +63,7 @@
     "minimark": "^0.2.0",
     "motion-v": "^1.10.2",
     "nuxt": "^4.3.1",
-    "nuxt-component-meta": "^0.17.1",
+    "nuxt-component-meta": "^0.17.2",
     "nuxt-llms": "^0.2.0",
     "nuxt-og-image": "^5.1.13",
     "ohash": "^2.0.11",
@@ -66,14 +71,13 @@
     "pkg-types": "^2.3.0",
     "prettier": "^3.8.1",
     "scule": "^1.3.0",
-    "shiki": "^3.22.0",
     "shiki-stream": "^0.1.4",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
     "ufo": "^1.6.3",
+    "unist-util-visit": "^5.1.0",
     "vue-component-meta": "^3.2.4",
-    "vite-plugin-top-level-await": "^1.6.0",
-    "vite-plugin-wasm": "^3.5.0",
-    "zod": "^4.3.6"
+    "zod": "^4.3.6",
+    "zod-to-json-schema": "^3.25.1"
   }
 }

package/server/plugins/llms.ts

@@ -6,8 +6,17 @@ export default defineNitroPlugin((nitroApp) => {
     await transformMDC(event, doc as any)
   })
 
-  // @ts-expect-error - no types available
-  nitroApp.hooks.hook('llms:generate', (_, { sections }) => {
+  nitroApp.hooks.hook('llms:generate', (_, { sections, domain }) => {
+    // Transform links except for "Documentation Sets"
+    sections.forEach((section) => {
+      if (section.title !== 'Documentation Sets') {
+        section.links = section.links?.map(link => ({
+          ...link,
+          href: `${link.href.replace(new RegExp(`^${domain}`), `${domain}/raw`)}.md`
+        }))
+      }
+    })
+
     // Move "Documentation Sets" to the end
     const docSetIdx = sections.findIndex((s: any) => s.title === 'Documentation Sets')
     if (docSetIdx !== -1) {

package/utils/meta.ts

@@ -1,16 +1,21 @@
-// copy from https://github.com/nuxt-content/docus/tree/main/layer/utils
 import { readFile } from 'node:fs/promises'
 import { resolve } from 'node:path'
+import { withHttps } from 'ufo'
 
 export function inferSiteURL() {
   // https://github.com/unjs/std-env/issues/59
-  return (
-    process.env.NUXT_SITE_URL
-    || (process.env.NEXT_PUBLIC_VERCEL_URL && `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`) // Vercel
+  const url = (
+    process.env.NUXT_PUBLIC_SITE_URL // Nuxt public runtime config
+    || process.env.NUXT_SITE_URL // Nuxt site config
+    || process.env.VERCEL_PROJECT_PRODUCTION_URL // Vercel production URL
+    || process.env.VERCEL_BRANCH_URL // Vercel branch URL
+    || process.env.VERCEL_URL // Vercel deployment URL
     || process.env.URL // Netlify
     || process.env.CI_PAGES_URL // Gitlab Pages
     || process.env.CF_PAGES_URL // Cloudflare Pages
   )
+
+  return url ? withHttps(url) : undefined
 }
 
 export async function getPackageJsonMetadata(dir: string) {

package/app/mdc.config.ts

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

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

@@ -1,89 +0,0 @@
-import type { ShikiTransformer } from 'shiki'
-
-export interface TransformerIconHighlightOptions {
-  /**
-   * Custom function to render the icon HTML
-   * @default Uses Iconify API with mask mode
-   */
-  htmlIcon?: (icon: string) => string
-}
-
-// Common icon collections to validate against (sorted by length descending for proper matching)
-const ICON_COLLECTIONS = [
-  'simple-icons',
-  'vscode-icons',
-  'tabler',
-  'lucide',
-  'logos',
-  'ph'
-]
-
-function parseIconName(text: string): { collection: string, name: string, format: 'i' | 'colon' } | null {
-  // Strip quotes if present (single, double, or backticks)
-  let cleanText = text
-  if (/^['"`].*['"`]$/.test(text)) {
-    cleanText = text.slice(1, -1)
-  }
-
-  // Try i-{collection}-{name} format
-  if (cleanText.startsWith('i-')) {
-    const rest = cleanText.slice(2)
-    for (const collection of ICON_COLLECTIONS) {
-      if (rest.startsWith(`${collection}-`)) {
-        const name = rest.slice(collection.length + 1)
-        if (name && /^[a-z0-9]+(?:-[a-z0-9]+)*$/i.test(name)) {
-          return { collection, name, format: 'i' }
-        }
-      }
-    }
-  }
-
-  // Try {collection}:{name} format
-  const colonIndex = cleanText.indexOf(':')
-  if (colonIndex > 0) {
-    const collection = cleanText.slice(0, colonIndex)
-    const name = cleanText.slice(colonIndex + 1)
-    if (ICON_COLLECTIONS.includes(collection) && name && /^[a-z0-9]+(?:-[a-z0-9]+)*$/i.test(name)) {
-      return { collection, name, format: 'colon' }
-    }
-  }
-
-  return null
-}
-
-export function transformerIconHighlight(options: TransformerIconHighlightOptions = {}): ShikiTransformer {
-  const { htmlIcon } = options
-
-  return {
-    name: 'shiki-transformer-icon-highlight',
-    span(hast, _line, _col, _lineElement, token) {
-      const text = token.content
-
-      // Try to parse as an icon
-      const parsed = parseIconName(text)
-      if (!parsed) return
-
-      const iconIdentifier = `${parsed.collection}:${parsed.name}`
-      // Add color=black for mask-image to work properly (mask uses luminance)
-      const iconUrl = `https://api.iconify.design/${iconIdentifier}.svg?color=%23000`
-
-      // Create the icon element as a proper HAST element
-      const iconElement = htmlIcon
-        ? { type: 'raw' as const, value: htmlIcon(iconIdentifier) }
-        : {
-            type: 'element' as const,
-            tagName: 'i',
-            properties: {
-              class: 'shiki-icon-highlight',
-              style: `--shiki-icon-url: url(${iconUrl})`
-            },
-            children: []
-          }
-
-      // Prepend the icon to the span content
-      if (hast.children) {
-        hast.children.unshift(iconElement)
-      }
-    }
-  }
-}