@movk/nuxt-docs 1.3.7 → 1.3.8

package/README.md

@@ -19,6 +19,7 @@
 - 🎨 **采用 Nuxt UI** - 集成全面的 UI 组件库，开箱即用
 - 📝 **MDC 语法增强** - 支持 Markdown 与 Vue 组件的无缝集成，实现动态内容
 - 🧩 **组件文档自动生成** - 自动生成 Props、Slots、Emits 文档及交互式示例
+- 📦 **Git 提交历史集成** - 通过 CommitChangelog 组件自动展示文件的提交历史记录
 - 📚 **智能侧边栏导航** - 根据内容结构自动生成导航
 - 🔍 **全文搜索** - 内置强大的全文搜索功能
 - 🌙 **暗黑模式** - 支持亮色/暗色主题切换
@@ -31,14 +32,30 @@
 
 ### 使用模板创建项目
 
-```bash [Terminal]
-# 使用此模板创建新项目
+根据您的需求选择合适的模板：
+
+#### 📚 完整文档站点（推荐）
+
+适合构建完整的文档网站，包含 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` 查看你的文档网站。
 
 ### 作为 Layer 使用
@@ -73,9 +90,9 @@ export default defineNuxtConfig({
 
 ## 📁 项目结构
 
-### 完整项目结构
+### 模板项目结构
 
-使用模板创建的项目结构：
+使用模板创建的项目结构（以 `default` 模板为例）：
 
 ```bash
 my-docs/
@@ -86,22 +103,27 @@ my-docs/
 │   ├── index.md                 # 首页
 │   └── docs/                    # 文档页面
 ├── public/                      # 静态资源
-├── scripts/                     # 脚本
 ├── nuxt.config.ts               # Nuxt 配置
+├── app.config.ts                # 应用配置
+├── content.config.ts            # 内容配置
 ├── tsconfig.json                # TypeScript 配置
 ├── package.json                 # 依赖与脚本
-├── pnpm-workspace.yaml          # pnpm 工作区配置
 └── README.md                    # 项目说明
 ```
 
 ### Monorepo 结构
 
-本项目采用 monorepo 结构：
+本仓库采用 monorepo 结构：
 
-- `/docs` - 官方文档站点
-- `/layer` - Movk Nuxt Docs 主题 layer（`@movk/nuxt-docs`）
-- `/template` - 项目模板
-- `/scripts` - 构建脚本
+```bash
+movk-nuxt-docs/
+├── docs/                        # 官方文档站点
+├── layer/                       # @movk/nuxt-docs layer 包
+├── templates/
+│   ├── default/                 # 完整文档站点模板
+│   └── module/                  # 模块文档站点模板（精简）
+└── scripts/                     # 构建脚本
+```
 
 ## 📝 内容编写
 

package/app/components/content/CommitChangelog.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { camelCase, upperFirst } from '@movk/core'
+
+interface Commit {
+  sha: string
+  message: string
+}
+
+const props = defineProps<{
+  /**
+   * The path to the file in the repository.
+   * @defaultValue 'src'
+   */
+  commitPath?: string
+  /**
+   * The prefix for the file path.
+   */
+  prefix?: string
+  /**
+   * The file extension.
+   * @defaultValue 'vue'
+   */
+  suffix?: string
+  /**
+   * The name of the component or file to get the changelog for.
+   */
+  name?: string
+}>()
+
+const SHA_SHORT_LENGTH = 5
+
+const { github } = useAppConfig()
+const route = useRoute()
+
+// 计算文件路径相关的值
+const routeName = computed(() => route.path.split('/').pop() ?? '')
+const githubUrl = computed(() => (github && typeof github === 'object' ? github.url : ''))
+
+const filePath = computed(() => {
+  const basePath = props.commitPath ?? (github && typeof github === 'object' ? github.commitPath : 'src')
+  const filePrefix = props.prefix ? `${props.prefix}/` : ''
+  const fileExtension = props.suffix ?? (github && typeof github === 'object' ? github.suffix : 'vue')
+  const fileName = props.name ?? routeName.value
+
+  const camelName = fileExtension === 'vue'
+    ? upperFirst(camelCase(fileName))
+    : camelCase(fileName)
+
+  return `${basePath}/${filePrefix}${camelName}.${fileExtension}`
+})
+
+const { data: commits } = await useLazyFetch<Commit[]>('/api/github/commits', {
+  key: `commit-changelog-${props.name ?? routeName.value}`,
+  query: { path: filePath.value }
+})
+
+// 格式化提交消息
+const formattedCommits = computed(() => {
+  if (!commits.value?.length) return []
+
+  return commits.value.map((commit) => {
+    const shortSha = commit.sha.slice(0, SHA_SHORT_LENGTH)
+    const commitLink = `[\`${shortSha}\`](${githubUrl.value}/commit/${commit.sha})`
+
+    const content = commit.message
+      .replace(/\(.*?\)/, '')
+      .replace(/#(\d+)/g, `<a href='${githubUrl.value}/issues/$1'>#$1</a>`)
+      .replace(/`(.*?)`/g, '<code class="text-xs">$1</code>')
+
+    return {
+      sha: commit.sha,
+      formatted: `${commitLink} — ${content}`
+    }
+  })
+})
+</script>
+
+<template>
+  <div v-if="!formattedCommits.length">
+    No recent changes
+  </div>
+
+  <div v-else class="flex flex-col gap-1.5 relative">
+    <div class="bg-accented w-px h-full absolute left-[11px] z-[-1]" />
+
+    <div
+      v-for="commit of formattedCommits"
+      :key="commit.sha"
+      class="flex gap-1.5 items-center"
+    >
+      <div class="bg-accented ring-2 ring-bg size-1.5 mx-[8.5px] rounded-full" />
+      <MDC :value="commit.formatted" class="text-sm *:py-0 *:my-0 [&_code]:text-xs" tag="div" />
+    </div>
+  </div>
+</template>

package/app/components/content/ComponentExample.vue

@@ -5,7 +5,7 @@ import { hash } from 'ohash'
 import { useElementSize } from '@vueuse/core'
 import { get, set } from '#ui/utils'
 
-const { preview = true, source = true, prettier = true, ...props } = defineProps<{
+const { preview = true, source = true, prettier = false, ...props } = defineProps<{
   name: string
   class?: any
   /**

package/app/types/index.d.ts

@@ -29,6 +29,9 @@ declare module 'nuxt/schema' {
       url: string
       branch: string
       rootDir: string
+      commitPath: string
+      since: string
+      suffix: string
     } | false
   }
 }

package/modules/config.ts

@@ -49,6 +49,9 @@ export default defineNuxtModule({
       owner: gitInfo?.owner,
       name: gitInfo?.name,
       url: gitInfo?.url,
+      commitPath: 'src',
+      suffix: 'vue',
+      since: '2025-01-31T04:00:00Z',
       branch: getGitBranch()
     })
 
@@ -65,7 +68,7 @@ export default defineNuxtModule({
         'nuxt-og-image',
         '@nuxtjs/plausible',
         '@nuxt/ui',
-        new RegExp(`${componentsPath.replace(/[/\\]/g, '[/\\\\]')}/(?!content/(ComponentEmits|ComponentProps|ComponentSlots|ComponentExample)\\.vue$)`)
+        new RegExp(`${componentsPath.replace(/[/\\]/g, '[/\\\\]')}/(?!content/(ComponentEmits|ComponentProps|ComponentSlots|ComponentExample|CommitChangelog)\\.vue$)`)
       ],
       metaFields: {
         type: false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@movk/nuxt-docs",
   "type": "module",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "private": false,
   "description": "An elegant documentation theme for Nuxt, powered by Nuxt UI and Nuxt Content.",
   "author": "YiXuan <mhaibaraai@gmail.com>",
@@ -30,12 +30,13 @@
     "@iconify-json/lucide": "^1.2.75",
     "@iconify-json/simple-icons": "^1.2.60",
     "@iconify-json/vscode-icons": "^1.2.36",
-    "@movk/core": "^1.0.1",
+    "@movk/core": "^1.0.2",
     "@nuxt/content": "^3.8.2",
     "@nuxt/image": "^2.0.0",
     "@nuxt/kit": "^4.2.1",
     "@nuxt/ui": "^4.2.1",
     "@nuxtjs/seo": "^3.2.2",
+    "@octokit/rest": "^22.0.1",
     "@vueuse/core": "^14.0.0",
     "@vueuse/nuxt": "^14.0.0",
     "defu": "^6.1.4",

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

@@ -0,0 +1,34 @@
+import { Octokit } from '@octokit/rest'
+
+export default defineCachedEventHandler(async (event) => {
+  if (!process.env.NUXT_GITHUB_TOKEN) {
+    return []
+  }
+
+  const { path } = getQuery(event) as { path: string }
+  if (!path) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Path is required'
+    })
+  }
+
+  const { github } = useAppConfig()
+  console.log(github)
+  const octokit = new Octokit({ auth: process.env.NUXT_GITHUB_TOKEN })
+  const commits = await octokit.paginate(octokit.rest.repos.listCommits, {
+    owner: github.owner,
+    repo: github.name,
+    path,
+    since: github.since
+  })
+
+  return commits.map(commit => ({
+    sha: commit.sha,
+    date: commit.commit.author?.date ?? '',
+    message: (commit.commit.message?.split('\n')[0] ?? '')
+  }))
+}, {
+  maxAge: 60 * 60,
+  getKey: event => `commits-${getQuery(event).path}`
+})