feat: add the nuxt utiles

.docs/.vitepress/config.mts

@@ -1,4 +1,6 @@
 import { defineConfig } from 'vitepress'
+import { transformerTwoslash } from 'vitepress-plugin-twoslash'
+import { nuxtCompilerOptions, prepend, typeDecorations } from './nuxtUtils'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -71,4 +73,27 @@ export default defineConfig({
       { icon: 'x', link: 'https://twitter.com/oku_ui' },
     ],
   },
+
+  lastUpdated: true,
+  cleanUrls: true,
+  metaChunk: true,
+  markdown: {
+    codeTransformers: [
+      transformerTwoslash({
+        twoslashOptions: {
+          compilerOptions: {
+            lib: ['esnext', 'dom'],
+            jsx: 1, // Preserve
+            jsxImportSource: 'vue',
+            ...nuxtCompilerOptions,
+          },
+          extraFiles: {
+            ...typeDecorations,
+            'index.ts': { prepend },
+            'index.tsx': { prepend },
+          },
+        },
+      }),
+    ],
+  },
 })

.docs/.vitepress/nuxtUtils.ts

@@ -0,0 +1,55 @@
+// @credit: @antfu https://github.com/antfu/nuxt-content-twoslash
+
+import { existsSync } from 'node:fs'
+import fs from 'node:fs/promises'
+import fg from 'fast-glob'
+import ts from 'typescript'
+import { dirname, join, relative, resolve } from 'pathe'
+
+export const prepend = [
+  '/// <reference types="./.nuxt/nuxt.d.ts" />',
+  '',
+].join('\n')
+
+async function getTypeDecorations(dir: string, filesMap: Record<string, string> = {}) {
+  const files = await fg('**/*.d.ts', {
+    cwd: dir,
+    onlyFiles: true,
+  })
+  await Promise.all(
+    files.map(async (file) => {
+      filesMap[`.nuxt/${file}`] = await fs.readFile(join(dir, file), 'utf-8')
+    }),
+  )
+  return filesMap
+}
+
+function removeJSONComments(content: string) {
+  return content.replace(/\/\/.*/g, '')
+}
+
+async function getNuxtCompilerOptions(dir: string) {
+  const path = join(dir, 'tsconfig.json')
+  if (existsSync(path)) {
+    try {
+      const tsconfig = await fs.readFile(path, 'utf-8')
+      const config = JSON.parse(removeJSONComments(tsconfig)) || {}
+      const json = ts.convertCompilerOptionsFromJson(config.compilerOptions, dir, '').options
+      Object.entries(json.paths || {}).forEach(([key, value]) => {
+        json.paths![key] = value.map((v: string) => `./${relative(dirname(dir), resolve(dir, v))}`)
+        if (key === '#imports')
+          json.paths![key] = ['./.nuxt/imports.d.ts']
+      })
+      return json
+    }
+    catch (e) {
+      console.error('[nuxt-content-twoslash] Failed to parse .nuxt/tsconfig.json', e)
+      return {}
+    }
+  }
+  return {}
+}
+
+export const typeDecorations = await getTypeDecorations(join(__dirname, '..', '.nuxt'))
+
+export const nuxtCompilerOptions = await getNuxtCompilerOptions(join(__dirname, '..', '.nuxt'))

.docs/apis/components/motion.md

@@ -4,7 +4,7 @@ description: Motion components are DOM primitives optimised for 60fps animation
 icon: i-ph-brackets-curly-duotone
 next:
   text: 'PresenceGroup'
-  link: '/apis/presence-group'
+  link: '/apis/components/presence-group'
 ---
 
 # Motion

.docs/apis/components/presence-group.md

@@ -4,10 +4,10 @@ description: Perform exit animations in Vue. Group multiple Motion components to
 icon: i-ph-brackets-curly-duotone
 next:
   text: 'Presence'
-  link: '/apis/presence'
+  link: '/apis/components/presence'
 prev:
   text: 'Motion'
-  link: '/apis/motion'
+  link: '/apis/components/motion'
 ---
 
 # PresenceGroup

.docs/apis/components/presence.md

@@ -4,7 +4,7 @@ description: Perform exit animations in Vue.
 icon: i-ph-brackets-curly-duotone
 prev:
   text: 'Transition'
-  link: '/apis/transition'
+  link: '/apis/components/transition'
 ---
 
 # Presence