@movk/nuxt-docs 1.4.2 → 1.5.1

package/app/app.config.ts

@@ -1,4 +1,4 @@
-import type { ButtonProps } from '@nuxt/ui'
+import type { ExtendedButtonProps } from './types'
 
 export default defineAppConfig({
   toaster: {
@@ -44,17 +44,31 @@ export default defineAppConfig({
     to: '/',
     search: true,
     colorMode: true,
-    links: [] as ButtonProps[]
+    links: [] as ExtendedButtonProps[]
   },
   footer: {
     credits: `Copyright © 2024 - ${new Date().getFullYear()}`,
-    socials: [] as ButtonProps[]
+    socials: [] as ExtendedButtonProps[]
   },
   toc: {
     title: '页面导航',
     bottom: {
       title: '社区',
-      links: [] as ButtonProps[]
+      links: [] as ExtendedButtonProps[]
+    }
+  },
+  github: {
+    rootDir: '',
+    dateFormat: {
+      locale: 'zh-CN',
+      options: {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        timeZone: 'Asia/Shanghai'
+      }
     }
   }
 })

package/app/components/content/HeaderToggleButton.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { motion } from 'motion-v'
+import type { VariantType } from 'motion-v'
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const variants: { [k: string]: VariantType | ((custom: unknown) => VariantType) } = {
+  normal: {
+    rotate: 0,
+    y: 0,
+    opacity: 1
+  },
+  close: (custom: unknown) => {
+    const c = custom as number
+    return {
+      rotate: c === 1 ? 45 : c === 3 ? -45 : 0,
+      y: c === 1 ? 6 : c === 3 ? -6 : 0,
+      opacity: c === 2 ? 0 : 1,
+      transition: {
+        type: 'spring',
+        stiffness: 260,
+        damping: 20
+      }
+    }
+  }
+}
+
+const state = computed(() => props.open ? 'close' : 'normal')
+</script>
+
+<template>
+  <UButton
+    size="sm"
+    variant="ghost"
+    color="neutral"
+    square
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="size-5"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <motion.line
+        x1="4"
+        y1="6"
+        x2="20"
+        y2="6"
+        :variants="variants"
+        :animate="state"
+        :custom="1"
+        class="outline-none"
+      />
+      <motion.line
+        x1="4"
+        y1="12"
+        x2="20"
+        y2="12"
+        :variants="variants"
+        :animate="state"
+        :custom="2"
+        class="outline-none"
+      />
+      <motion.line
+        x1="4"
+        y1="18"
+        x2="20"
+        y2="18"
+        :variants="variants"
+        :animate="state"
+        :custom="3"
+        class="outline-none"
+      />
+    </svg>
+  </UButton>
+</template>

package/app/components/header/Header.vue

@@ -49,6 +49,14 @@ const links = computed<ButtonProps[]>(() => github && github.url
       </template>
     </template>
 
+    <template #toggle="{ open, toggle, ui }">
+      <HeaderToggleButton
+        :open="open"
+        :class="ui.toggle({ toggleSide: 'right' })"
+        @click="toggle"
+      />
+    </template>
+
     <template #body>
       <HeaderBody />
     </template>

package/app/mdc.config.ts

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

package/app/types/index.d.ts

@@ -1,5 +1,9 @@
 import type { ButtonProps } from '@nuxt/ui'
 
+export interface ExtendedButtonProps extends ButtonProps {
+  label?: string
+}
+
 declare module 'nuxt/schema' {
   interface AppConfig {
     vercelAnalytics: {
@@ -17,17 +21,17 @@ declare module 'nuxt/schema' {
       to: string
       search: boolean
       colorMode: boolean
-      links: ButtonProps[]
+      links: ExtendedButtonProps[]
     }
     footer: {
       credits: string
-      socials: ButtonProps[]
+      socials: ExtendedButtonProps[]
     }
     toc: {
       title: string
       bottom: {
         title: string
-        links: ButtonProps[]
+        links: ExtendedButtonProps[]
       }
     }
     github: {

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

@@ -0,0 +1,90 @@
+/** copy from https://github.com/nuxt/ui/blob/v4/docs/app/utils/shiki-transformer-icon-highlight.ts */
+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)
+      }
+    }
+  }
+}

package/content.config.ts

@@ -1,4 +1,4 @@
-import { defineCollection, defineContentConfig, property, z } from '@nuxt/content'
+import { defineCollection, defineContentConfig, z } from '@nuxt/content'
 import { useNuxt } from '@nuxt/kit'
 import { asSeoCollection } from '@nuxtjs/seo/content'
 import { joinURL } from 'ufo'
@@ -6,6 +6,26 @@ import { joinURL } from 'ufo'
 const { options } = useNuxt()
 const cwd = joinURL(options.rootDir, 'content')
 
+const Avatar = z.object({
+  src: z.string(),
+  alt: z.string().optional()
+})
+
+const Button = z.object({
+  label: z.string(),
+  icon: z.string().optional(),
+  avatar: Avatar.optional(),
+  leadingIcon: z.string().optional(),
+  trailingIcon: z.string().optional(),
+  to: z.string().optional(),
+  target: z.enum(['_blank', '_self']).optional(),
+  color: z.enum(['primary', 'neutral', 'success', 'warning', 'error', 'info']).optional(),
+  size: z.enum(['xs', 'sm', 'md', 'lg', 'xl']).optional(),
+  variant: z.enum(['solid', 'outline', 'subtle', 'soft', 'ghost', 'link']).optional(),
+  id: z.string().optional(),
+  class: z.string().optional()
+})
+
 export default defineContentConfig({
   collections: {
     landing: defineCollection(asSeoCollection({
@@ -22,7 +42,7 @@ export default defineContentConfig({
         include: 'docs/**/*'
       }],
       schema: z.object({
-        links: z.array(property(z.object({})).inherit('@nuxt/ui/components/Button.vue')),
+        links: z.array(Button),
         category: z.string().optional(),
         navigation: z.object({
           title: z.string().optional()

package/modules/config.ts

@@ -70,7 +70,19 @@ export default defineNuxtModule({
         'nuxt-og-image',
         '@nuxtjs/plausible',
         '@nuxt/ui',
-        new RegExp(`${componentsPath.replace(/[/\\]/g, '[/\\\\]')}/(?!content/(ComponentEmits|ComponentProps|ComponentSlots|ComponentExample|CommitChangelog|PageLastCommit)\\.vue$)`)
+        (component: { filePath: string }) => {
+          const allowedComponents = [
+            'CommitChangelog.vue',
+            'ComponentEmits.vue',
+            'ComponentExample.vue',
+            'ComponentProps.vue',
+            'ComponentSlots.vue',
+            'PageLastCommit.vue',
+            'Motion.vue'
+          ]
+          return component.filePath.startsWith(componentsPath)
+            && !allowedComponents.some(name => component.filePath.endsWith(`/content/${name}`))
+        }
       ],
       metaFields: {
         type: false,

package/modules/css.ts

@@ -21,7 +21,23 @@ export default defineNuxtModule({
 
 @source "${contentDir.replace(/\\/g, '/')}/**/*";
 @source "${layerDir.replace(/\\/g, '/')}/**/*";
-@source "../../app.config.ts";`
+@source "../../app.config.ts";
+
+/* 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/nuxt.config.ts

@@ -1,4 +1,5 @@
 import { createResolver } from '@nuxt/kit'
+import { defineNuxtConfig } from 'nuxt/config'
 import pkg from './package.json'
 
 const { resolve } = createResolver(import.meta.url)
@@ -18,6 +19,13 @@ export default defineNuxtConfig({
     'motion-v/nuxt',
     'nuxt-llms'
   ],
+  app: {
+    rootAttrs: {
+      'data-vaul-drawer-wrapper': '',
+      'class': 'bg-default'
+    }
+  },
+  // @ts-ignore - content 配置的类型定义在运行时才能正确解析
   content: {
     build: {
       markdown: {
@@ -32,6 +40,11 @@ export default defineNuxtConfig({
       noApiRoute: false
     }
   },
+  ui: {
+    experimental: {
+      componentDetection: true
+    }
+  },
   runtimeConfig: {
     public: {
       version: pkg.version
@@ -45,7 +58,13 @@ export default defineNuxtConfig({
       : {}
   },
   experimental: {
-    typescriptPlugin: true
+    typescriptPlugin: true,
+    asyncContext: true,
+    defaults: {
+      nuxtLink: {
+        externalRelAttribute: 'noopener'
+      }
+    }
   },
   compatibilityDate: 'latest',
   nitro: {
@@ -65,12 +84,6 @@ export default defineNuxtConfig({
         'tailwind-variants',
         'tailwindcss/colors'
       ]
-    },
-    resolve: {
-      alias: {
-        extend: 'extend/index.js',
-        debug: 'debug/src/browser.js'
-      }
     }
   },
   fonts: {
@@ -87,6 +100,10 @@ export default defineNuxtConfig({
   icon: {
     provider: 'iconify'
   },
+  image: {
+    format: ['webp', 'jpeg', 'jpg', 'png', 'svg'],
+    provider: 'ipx'
+  },
   linkChecker: {
     report: {
       publish: true,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@movk/nuxt-docs",
   "type": "module",
-  "version": "1.4.2",
+  "version": "1.5.1",
   "private": false,
   "description": "An elegant documentation theme for Nuxt, powered by Nuxt UI and Nuxt Content.",
   "author": "YiXuan <mhaibaraai@gmail.com>",
@@ -27,11 +27,11 @@
     "README.md"
   ],
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.81",
+    "@iconify-json/lucide": "^1.2.82",
     "@iconify-json/simple-icons": "^1.2.63",
     "@iconify-json/vscode-icons": "^1.2.37",
-    "@movk/core": "^1.0.2",
-    "@nuxt/content": "^3.9.0",
+    "@movk/core": "^1.0.3",
+    "@nuxt/content": "^3.10.0",
     "@nuxt/image": "^2.0.0",
     "@nuxt/kit": "^4.2.2",
     "@nuxt/ui": "^4.3.0",
@@ -45,13 +45,14 @@
     "exsolve": "^1.0.8",
     "git-url-parse": "^16.1.0",
     "motion-v": "^1.7.4",
-    "nuxt-component-meta": "^0.15.0",
+    "nuxt-component-meta": "^0.16.0",
     "nuxt-llms": "^0.1.3",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
     "pkg-types": "^2.3.0",
     "prettier": "^3.7.4",
     "scule": "^1.3.0",
+    "shiki-transformer-color-highlight": "^1.0.0",
     "tailwindcss": "^4.1.18",
     "ufo": "^1.6.1"
   }

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

@@ -16,6 +16,14 @@ export default defineCachedEventHandler(async (event) => {
   }
 
   const { github } = useAppConfig()
+
+  if (!github || typeof github === 'boolean') {
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'GitHub configuration is not available'
+    })
+  }
+
   const octokit = new Octokit({ auth: process.env.NUXT_GITHUB_TOKEN })
 
   const allCommits = await Promise.all(

package/server/api/github/last-commit.get.ts

@@ -14,6 +14,14 @@ export default defineCachedEventHandler(async (event) => {
   }
 
   const { github } = useAppConfig()
+
+  if (!github || typeof github === 'boolean') {
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'GitHub configuration is not available'
+    })
+  }
+
   const octokit = new Octokit({ auth: process.env.NUXT_GITHUB_TOKEN })
 
   try {
@@ -30,6 +38,9 @@ export default defineCachedEventHandler(async (event) => {
     }
 
     const commit = commits[0]
+    if (!commit) {
+      return null
+    }
 
     // 获取提交者信息，处理 web-flow 场景（PR squash merge）
     let authorName = commit.commit.author?.name ?? ''
@@ -63,14 +74,13 @@ export default defineCachedEventHandler(async (event) => {
     const date = commit.commit.author?.date ?? ''
     const dateFormat = github.dateFormat ?? {}
     const locale = dateFormat.locale ?? 'zh-CN'
-    const timeZone = dateFormat.timeZone ?? 'Asia/Shanghai'
     const formatOptions: Intl.DateTimeFormatOptions = dateFormat.options ?? {
       year: 'numeric',
       month: 'numeric',
       day: 'numeric',
       hour: '2-digit',
       minute: '2-digit',
-      timeZone
+      timeZone: 'Asia/Shanghai'
     }
     const dateFormatted = date
       ? new Date(date).toLocaleDateString(locale, formatOptions)