@yunyoujun/docs

搭建文档（VitePress）常用的配置、组件、样式等。

unplugin-vue-components: 自动加载 .vitepress/theme/components 下的组件。
unocss: 配置 UnoCSS 常用原子化类。
vitepress-plugin-group-icons: 为文档代码块添加图标和标题。
markdown-it-task-lists: 支持任务列表。

使用

pnpm

bash

pnpm add -D @yunyoujun/docs

pnpm

bash

# 按需添加
pnpm add -D unocss unplugin-vue-components vite-plugin-vue-devtools
# vitepress
pnpm add -D vitepress-plugin-group-icons @shikijs/vitepress-twoslash

配置

你的文档目录配置：

vite.config.ts

import { getViteConfig } from '@yunyoujun/docs'
import { defineConfig } from 'vite'
// custom your plugins
// import { MarkdownTransform } from './.vitepress/plugins/markdownTransform'

const viteConfig = getViteConfig({})
// viteConfig.plugins?.push(MarkdownTransform())

export default defineConfig({
  ...viteConfig,
})

.vitepress/config/index.ts

import { getVitepressConfig } from '@yunyoujun/docs'
import { defineConfig } from 'vitepress'

const vpConfig = getVitepressConfig({
  /**
   * - 当传入 `repo` 时，默认设置 `editLink` 和 `socialLinks`
   * - `editLink` 为 repo + `/edit/main/docs/:path`
   */
  repo: 'https://github.com/YunYouJun/docs',
})

// https://vitepress.dev/reference/site-config
export default defineConfig({
  ...vpConfig,

  title: '云游君的文档',
  description: 'Docs for YunYouJun Projects.',

  themeConfig: {
    ...vpConfig.themeConfig,

    // your theme config
  },
})

配置 TypeDoc

bash

pnpm add -D typedoc
pnpm add -D typedoc-plugin-markdown typedoc-vitepress-theme

设置 entryPoints:

typedoc.json

json

{
  "$schema": "https://typedoc.org/schema.json",
  "docsRoot": ".",
  "entryPoints": [
    "../packages/docs/node",
    "../packages/docs/types",
    "../packages/docs/utils"
  ],
  "exclude": [
    "examples/**/*"
  ],
  "out": "./api",
  "categorizeByGroup": true,
  "plugin": ["typedoc-plugin-markdown", "typedoc-vitepress-theme"],
  "readme": "none",
  // https://typedoc-plugin-markdown.org/plugins/vitepress
  "sidebar": {
    "autoConfiguration": true,
    "format": "vitepress",
    "pretty": true,
    "collapsed": false
  }
}

.gitignore

bash

api

.vitepress/config/index.ts

import typedocSidebar from '../../api/typedoc-sidebar.json'

export default defineConfig({
  // ...
  themeConfig: {
    // ...
    sidebar: {
      '/api/': [
        {
          text: 'API',
          items: typedocSidebar,
        },
      ],
    },
  },
})

组件

DemoDocsProjectList

DemoDocsProjectList.vue

vue

<script setup lang="ts">
import { projects } from './data'
</script>

<template>
  <DocsProjectList :projects="projects" />
</template>

.vitepress/theme/components/demo/data.ts

data.ts

import type { ProjectItem } from '@yunyoujun/docs/types'

export interface Integration {
  icon: string
  name: string
  link: string
  target?: string
  secondary?: string
}

export interface Example {
  name: string
  path: string
  icon?: string
  icons?: string[]
}

export const integrations: Integration[] = [
  { name: 'Vite', link: '/integrations/vite', icon: 'i-logos:vitejs' },
  { name: 'Nuxt', link: '/integrations/nuxt', icon: 'i-logos:nuxt-icon' },
  { name: 'Webpack', link: '/integrations/webpack', icon: 'i-logos-webpack' },
  { name: 'Vue CLI', link: '/integrations/vue-cli', icon: 'i-logos-vue' },
]

export const examples: Example[] = [
  {
    name: 'vite',
    path: 'examples/vite',
    icon: 'i-logos-vitejs',
  },
  {
    name: 'vite-vue',
    path: 'examples/vite-vue',
    icons: [
      'i-logos-vitejs',
      'i-logos-vue',
    ],
  },
  {
    name: 'webpack',
    path: 'examples/webpack',
    icon: 'i-logos-webpack',
  },
  {
    name: 'vue-cli',
    path: 'examples/vue-cli',
    icons: [
      'i-logos-webpack',
      'i-logos-vue',
    ],
  },
  {
    name: 'nuxt3',
    path: 'examples/nuxt',
    icon: 'i-logos-nuxt-icon',
  },
]

export const projects: ProjectItem[] = [
  {
    title: 'Vite + Vie + Unocss',
    description: '使用 Unocss 的 Vite + Vue 项目',
    link: 'https://github.com/YunYouJun',
    logo: 'i-ri:projector-line',
    color: '#f35543',
    icons: [
      'i-logos:vitejs',
      'i-logos:vue',
      'i-logos:unocss',
    ],
  },
  {
    title: 'Nuxt + UnoCSS',
    description: '使用 UnoCSS 的 Nuxt 项目',
    link: 'https://github.com/YunYouJun',
    logo: 'i-ri:aed-line',
    color: 'dodgerblue',
    icons: [
      'i-logos:nuxt-icon',
      'i-logos:vue',
      'i-logos:unocss',
    ],
  },
  {
    title: 'Playwright + Vue',
    description: '使用 Playwright 进行测试',
    link: 'https://github.com/YunYouJun',
    logo: 'i-ri:playstation-line',
    color: 'yellow',
    icons: [
      'i-logos:vue',
      'i-logos:vitejs',
      'i-vscode-icons:file-type-playwright',
    ],
  },
  {
    title: 'Logo + Title',
    description: '使用 Playwright 进行测试',
    link: 'https://github.com/YunYouJun',
    logo: 'i-ri:playstation-line',
  },
  {
    title: 'Only Title',
    logo: 'i-logos:vue',
  },
]