docs: components page

docs/.vitepress/config.ts

@@ -1,14 +1,27 @@
 import { defineConfig } from 'vitepress'
 import UnoCSS from 'unocss/vite'
-import { presetUno, presetWind, presetTypography } from 'unocss'
+import { colors } from '@fmhy/colors'
+import { presetUno, presetWind } from 'unocss'
+
+const safelist = Object.entries(colors).flatMap(([group, shades]) =>
+  Object.keys(shades).flatMap((shade) => [
+    `text-${group}-${shade}`,
+    `bg-${group}-${shade}`
+  ])
+)
 
 export default defineConfig({
   title: 'Design System',
   description: '🎋',
   cleanUrls: true,
   vite: {
     plugins: [
-      UnoCSS({ presets: [presetUno(), presetWind(), presetTypography()] })
+      // @ts-expect-error
+      UnoCSS({
+        theme: { colors: colors },
+        safelist,
+        presets: [presetUno(), presetWind()]
+      })
     ]
   },
   themeConfig: {

docs/.vitepress/theme/index.ts

@@ -1,7 +1,7 @@
-// https://vitepress.dev/guide/custom-theme
 import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import Components from '@fmhy/components'
 import './style.css'
 import 'uno.css'
 
@@ -13,6 +13,6 @@ export default {
     })
   },
   enhanceApp({ app, router, siteData }) {
-    // ...
+    app.use(Components)
   }
 } satisfies Theme

docs/components.md

@@ -0,0 +1,6 @@
+# Components
+
+## `GradientCard`
+
+<GradientCard theme="cerise" title="title" description="Lorem ipsum dolor sit amet, qui minim labore
+adipisicing minim sint cillum sint consectetur cupidatat." tag="tag or link" />

docs/index.md

@@ -11,6 +11,6 @@ hero:
       text: Colors
       link: /colors
     - theme: alt
-      text: API Examples
-      link: /api-examples
+      text: Components
+      link: /components
 ---

docs/package.json

@@ -1,19 +1,20 @@
 {
-	"name": "@fmhy-monorepo/docs",
-	"version": "1.0.0",
-	"private": true,
-	"type": "module",
-	"scripts": {
-		"build": "vitepress build",
-		"dev": "vitepress dev",
-		"format": "prettier --write --cache .",
-		"preview": "vitepress preview"
-	},
-	"dependencies": {
-		"@fmhy/colors": "workspace:^",
-		"sass": "^1.71.1",
-		"unocss": "^0.58.5",
-		"vitepress": "1.0.0-rc.45",
-		"vue": "^3.4.21"
-	}
+  "name": "@fmhy-monorepo/docs",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vitepress build",
+    "dev": "vitepress dev",
+    "format": "prettier --write --cache *.{md,vue,ts}",
+    "preview": "vitepress preview"
+  },
+  "dependencies": {
+    "@fmhy/colors": "workspace:^",
+    "@fmhy/components": "workspace:^",
+    "sass": "^1.71.1",
+    "unocss": "^0.58.5",
+    "vitepress": "1.0.0-rc.45",
+    "vue": "^3.4.21"
+  }
 }