docs: 📖 采用 Monorepo 方式添加文档应用，为文档部署作准备

.gitignore

@@ -1,6 +1,10 @@
 # Dependencies
 node_modules
 
+# Doc
+docs/.vitepress/dist
+docs/.vitepress/cache
+
 # Setting
 
 # Build Outputs

docs/.vitepress/components/Badges.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  name: string
+}>()
+</script>
+
+<template>
+  <p flex="~ gap-2" h-5>
+    <a :href="`https://www.npmjs.com/package/@claxjs/${name}`" target="_blank"><img :src="`https://img.shields.io/npm/v/@claxjs/${name}?color=90D26D&labelColor=18181B&label=npm`" alt="NPM version"></a>
+    <a :href="`https://www.npmjs.com/package/@claxjs/${name}`" target="_blank"><img :src="`https://img.shields.io/npm/dw/@claxjs/${name}?color=90D26D&labelColor=18181B&label=downloads`" alt="NPM downloads"></a>
+    <a :href="`https://github.com/claxjs/${name}/tree/main`" target="_blank"><img :src="`https://img.shields.io/github/license/claxjs/${name}?style=flat&labelColor=18181B&color=90D26D&label=license`" alt="LICENSE"></a>
+    <a :href="`https://github.com/claxjs/${name}/tree/main`" target="_blank"><img src="https://img.shields.io/badge/source-a?logo=github&labelColor=18181B&color=90D26D" alt="GitHub"></a>
+  </p>
+</template>

docs/.vitepress/components/EgBase.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { ucv } from '@claxjs/ucv'
+
+const selected = ref(false)
+
+const checkbox = ucv({
+  base: {
+    root: 'inline-flex items-center gap-x-2 shrink-0',
+    box: [
+      'relative inline-flex items-center justify-center size-6 overflow-clip',
+      'border-2 border-solid border-[--vp-c-text-1] rounded-1.5',
+    ],
+    icon: '',
+    label: 'text-sm',
+  },
+})
+
+const checkboxClax = checkbox()
+</script>
+
+<template>
+  <PreviewBox>
+    <label :class="checkboxClax.root()">
+      <span :class="checkboxClax.box()">
+        <svg v-if="selected" :class="checkboxClax.icon()" viewBox="0 0 24 24">
+          <Icons name="heart" />
+        </svg>
+      </span>
+      <span :class="checkboxClax.label()">现在还点不了！你觉得缺了什么？🤔</span>
+    </label>
+  </PreviewBox>
+</template>

docs/.vitepress/components/EgCombosVars.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { ucv } from '@claxjs/ucv'
+
+const selected = ref(false)
+const enableThrough = true // 假设允许当checked时有划线
+
+const checkbox = ucv({
+  base: {
+    root: 'inline-flex items-center gap-x-2 shrink-0',
+    box: [
+      'relative inline-flex items-center justify-center size-6 overflow-clip',
+      'border-2 border-solid border-[--vp-c-text-1] rounded-1.5',
+      'after:(content-[""] absolute inset-0 bg-[--vp-c-brand] rounded-1 transition-all-300)',
+    ],
+    icon: 'z-1 animate-delay-0.6s animate-heart-beat',
+    label: 'flex items-center text-sm',
+  },
+  vars: {
+    selected: {
+      true: {
+        box: ['after:(scale-100)'],
+      },
+      false: {
+        box: ['after:(opacity-0 scale-50)'],
+      },
+    },
+    enableThrough: {
+      true: {
+        label: 'relative before:(content-[""] absolute transition-all-300 w-0 h-0.5 bg-[--vp-c-brand])',
+      },
+    },
+  },
+  combosVars: [
+    {
+      selected: true,
+      enableThrough: true,
+      class: {
+        label: 'text-[--vp-c-text-2] before:(w-full)',
+      },
+    },
+  ],
+})
+
+const checkboxClax = computed(() => {
+  return checkbox({ selected: selected.value, enableThrough })
+})
+</script>
+
+<template>
+  <PreviewBox>
+    <label :class="checkboxClax.root()" @click="selected = !selected">
+      <span :class="checkboxClax.box()">
+        <svg v-if="selected" :class="checkboxClax.icon()" viewBox="0 0 24 24">
+          <Icons name="heart" />
+        </svg>
+      </span>
+      <span :class="checkboxClax.label()">🐞 点击划掉BUG！</span>
+    </label>
+  </PreviewBox>
+</template>

docs/.vitepress/components/EgVars.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { ucv } from '@claxjs/ucv'
+
+const selected = ref(false)
+
+const checkbox = ucv({
+  base: {
+    root: 'inline-flex items-center gap-x-2 shrink-0',
+    box: [
+      'relative inline-flex items-center justify-center size-6 overflow-clip',
+      'border-2 border-solid border-[--vp-c-text-1] rounded-1.5',
+      'after:(content-[""] absolute inset-0 bg-[--vp-c-brand] rounded-1 transition-all-300)',
+    ],
+    icon: 'z-1 animate-delay-0.6s animate-heart-beat',
+    label: 'text-sm',
+  },
+  vars: {
+    selected: {
+      true: {
+        box: ['after:(scale-100)'],
+      },
+      false: {
+        box: ['after:(opacity-0 scale-50)'],
+      },
+    },
+  },
+})
+
+const checkboxClax = computed(() => {
+  return checkbox({ selected: selected.value })
+})
+</script>
+
+<template>
+  <PreviewBox>
+    <label :class="checkboxClax.root()" @click="selected = !selected">
+      <span :class="checkboxClax.box()">
+        <svg v-if="selected" :class="checkboxClax.icon()" viewBox="0 0 24 24">
+          <Icons name="heart" />
+        </svg>
+      </span>
+      <span :class="checkboxClax.label()">整点尬的，点一下看看是什么？</span>
+    </label>
+  </PreviewBox>
+</template>

docs/.vitepress/components/Icons.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  name: string
+}>()
+</script>
+
+<template>
+  <template v-if="name === 'heart'">
+    <path fill="currentColor" fill-opacity="0" d="M12 20L20.5 11V7L17 5.5L12 7L7 5.5L3.5 7V11L12 20Z">
+      <animate fill="freeze" attributeName="fill-opacity" begin="0.5s" dur="0.15s" values="0;0.3" />
+    </path>
+    <path
+      fill="none" stroke="currentColor" stroke-dasharray="30" stroke-dashoffset="30" stroke-linecap="round"
+      stroke-width="2"
+      d="M12 8C12 8 12 8 12.7578 7C13.6343 5.84335 14.9398 5 16.5 5C18.9853 5 21 7.01472 21 9.5C21 10.4251 20.7209 11.285 20.2422 12C19.435 13.206 12 21 12 21M12 8C12 8 12 8 11.2422 7C10.3657 5.84335 9.06021 5 7.5 5C5.01472 5 3 7.01472 3 9.5C3 10.4251 3.27914 11.285 3.75777 12C4.56504 13.206 12 21 12 21"
+    >
+      <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="30;0" />
+    </path>
+  </template>
+</template>

docs/.vitepress/components/PreviewBox.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex px-4 py-5 border-1 border-solid border-[--vp-u-green-soft] rounded-2">
+    <slot />
+  </div>
+</template>

docs/.vitepress/config.ts

@@ -0,0 +1,108 @@
+import type { DefaultTheme } from 'vitepress'
+import { defineConfig } from 'vitepress'
+import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
+
+import { qq } from '../public/icon'
+import vite from './vite.config'
+
+const GUIDES: DefaultTheme.NavItemWithLink[] = [
+  { text: '简介', link: '/guide/introduction' },
+  { text: '开始', link: '/guide/started' },
+]
+
+const FEATURE: DefaultTheme.NavItemWithLink[] = [
+  { text: 'API 概述', link: '/feature/api' },
+  { text: '基础单元(Base)', link: '/feature/base' },
+  { text: '属性变量(Vars)', link: '/feature/vars' },
+  { text: '默认属性(DefaultProps)', link: '/feature/defaultProps' },
+  { text: '组合变量(CombosVars)', link: '/feature/combosVars' },
+]
+
+const INTEGRATION: DefaultTheme.NavItemWithLink[] = [
+  { text: 'Uno', link: '/integration/uno' },
+  { text: 'Tailwind', link: '/integration/tailwind' },
+]
+
+const Nav: DefaultTheme.NavItem[] = [
+  { text: '指南', items: GUIDES },
+  { text: '功能', items: FEATURE },
+  { text: '集成', items: INTEGRATION },
+]
+
+const SidebarGuide: DefaultTheme.SidebarItem[] = [
+  { text: '指南', items: GUIDES },
+  { text: '功能', items: FEATURE },
+]
+
+const SidebarIntegration: DefaultTheme.SidebarItem[] = [
+  { text: '集成', items: INTEGRATION },
+]
+
+const Sidebar: DefaultTheme.Sidebar = {
+  '/guide/': SidebarGuide,
+  '/feature/': SidebarGuide,
+  '/integration/': SidebarIntegration,
+}
+
+export default defineConfig({
+  title: 'UCV',
+  description: 'utility class variant',
+
+  lastUpdated: true,
+  cleanUrls: true,
+  metaChunk: true,
+
+  themeConfig: {
+    logo: '/logo.svg',
+    search: {
+      provider: 'local',
+      options: {
+        translations: {
+          button: {
+            buttonText: '搜索文档',
+          },
+        },
+      },
+    },
+
+    nav: Nav,
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/claxjs/ucv' },
+      { icon: { svg: qq }, link: 'https://qm.qq.com/q/4c3Sn0R98Y' },
+    ],
+
+    sidebar: Sidebar,
+
+    editLink: {
+      pattern: 'https://github.com/claxjs/ucv/edit/main/docs/:path',
+      text: '对本页提出修改建议',
+    },
+
+    docFooter: {
+      prev: '上一页',
+      next: '下一页',
+    },
+
+    footer: {
+      copyright: 'Copyright © 2024-Present sKy(Skiyee)',
+      message: 'Released under the GPL-3.0 License.',
+    },
+  },
+  head: [
+    ['meta', { name: 'theme-color', content: '#ffffff' }],
+    ['link', { rel: 'icon', href: '/logo.svg', type: 'image/svg+xml' }],
+    ['meta', { name: 'author', content: 'Skiyee' }],
+    ['meta', { property: 'og:title', content: 'UCV' }],
+    ['meta', { property: 'og:image', content: '/logo.png' }],
+    ['meta', { property: 'og:description', content: '工具类(utility classes) 和 属性(props) 的最佳拍档' }],
+    ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0, viewport-fit=cover' }],
+  ],
+
+  vite,
+  markdown: {
+    codeTransformers: [
+      transformerTwoslash(),
+    ],
+  },
+})

docs/.vitepress/theme/index.ts

@@ -0,0 +1,14 @@
+import DefaultTheme from 'vitepress/theme'
+import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
+
+import '@shikijs/vitepress-twoslash/style.css'
+
+import 'uno.css'
+import './styles.css'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.use(TwoslashFloatingVue)
+  },
+}

docs/.vitepress/theme/styles.css

@@ -0,0 +1,28 @@
+/**
+ * Colors: Palette
+ * -------------------------------------------------------------------------- */
+ :root {
+  --vp-u-green-1: #7eca56;
+  --vp-u-green-2: #9fd35a;
+  --vp-u-green-3: #6db347;
+  --vp-u-green-soft: rgba(126, 202, 86, 0.14);
+}
+/**
+ * Colors: Function
+ * -------------------------------------------------------------------------- */
+ :root {
+  --vp-c-brand-1: var(--vp-u-green-1);
+  --vp-c-brand-2: var(--vp-u-green-2);
+  --vp-c-brand-3: var(--vp-u-green-3);
+  --vp-c-brand-soft: var(--vp-u-green-soft);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: linear-gradient(292deg, var(--vp-u-green-1), var(--vp-u-green-2));
+  --vp-home-hero-image-background-image: linear-gradient(to right, #4CAF50 10%, #8BC34A);
+  --vp-home-hero-image-filter: blur(100px);
+}

docs/.vitepress/uno.config.ts

@@ -0,0 +1,16 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetUno,
+  transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetAttributify(),
+  ],
+  transformers: [
+    transformerVariantGroup(),
+  ],
+})

docs/.vitepress/vite.config.ts

@@ -0,0 +1,20 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vite'
+import UnoCSS from 'unocss/vite'
+import Components from 'unplugin-vue-components/vite'
+
+export default defineConfig({
+  plugins: [
+    Components({
+      dirs: [
+        fileURLToPath(new URL('./components', import.meta.url)),
+      ],
+      dts: fileURLToPath(new URL('../components.d.ts', import.meta.url)),
+      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+      extensions: ['vue', 'md'],
+    }),
+    UnoCSS(
+      fileURLToPath(new URL('./uno.config.ts', import.meta.url)),
+    ),
+  ],
+})