docs: init Vitepress

Author: selemondev

.gitignore

@@ -112,4 +112,9 @@ dist
 .gen
 
 # Node dependencies
-node_modules
+node_modules
+
+# Vitepress
+
+docs/.vitepress/dist
+docs/.vitepress/cache

docs/.postcssrc.mjs

@@ -0,0 +1,11 @@
+export const plugins = {
+  'tailwindcss': {},
+  'postcss-prefix-selector': {
+    prefix: ':not(:where(.vp-raw *))',
+    includeFiles: [/vp-doc\.css/],
+    transform(prefix, _selector) {
+      const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
+      return selector + prefix + pseudo
+    },
+  },
+}

docs/.vitepress/components/demo-block/index.ts

@@ -0,0 +1,3 @@
+import DemoBlock from './src/index.vue'
+
+export default DemoBlock

docs/.vitepress/components/demo-block/src/index.ts

@@ -0,0 +1,38 @@
+import type { ExtractPropTypes } from 'vue'
+
+export const demoProps = {
+  github: {
+    type: String,
+    default: 'https://github.com/selemondev/windi-ui',
+  },
+  codeSandBox: {
+    type: String,
+    default: 'https://codesandbox.io/',
+  },
+  highlightedCode: {
+    type: String,
+    default: '',
+  },
+  code: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  desc: {
+    type: String,
+    default: '',
+  },
+  lang: {
+    type: String,
+    default: 'vue',
+  },
+  expand: {
+    type: Boolean,
+    default: false,
+  },
+} as const
+
+export type DemoProps = ExtractPropTypes<typeof demoProps>

docs/.vitepress/components/demo-block/src/index.vue

@@ -0,0 +1,46 @@
+<script lang='ts' setup name="demo-block">
+import { useClipboard, useToggle } from '@vueuse/core'
+import { computed } from 'vue'
+import { demoProps } from './index'
+
+const props = defineProps(demoProps)
+
+const decodedHighlightedCode = computed(() =>
+  decodeURIComponent(props.highlightedCode),
+)
+const { copy, copied } = useClipboard({ source: decodeURIComponent(props.code) })
+const [value, toggle] = useToggle()
+</script>
+
+<template>
+  <ClientOnly>
+    <div v-bind="$attrs" class="mt-6">
+      <div class="p-8 c-#282f38 overflow-x-scroll  border border-light-700 rounded-sm dark:bg-[#000000] dark:border-#4C4D4F flex flex-wrap [&:o-button-base]:!c-context vp-raw bg">
+        <slot />
+      </div>
+      <div class="relative">
+        <div class="flex justify-end pt-3 gap-2">
+          <a class="o-demo_action_item" group :href="github" target="_blank">
+            <div class="o-demo_action_icon i-carbon-logo-github" />
+            <div class="o-demo_tooltip" group-hover:opacity-100>
+              Edit on GitHub
+            </div>
+          </a>
+          <a class="o-demo_action_item" group @click="copy()">
+            <div class="o-demo_action_icon i-carbon:copy" />
+            <div class="o-demo_tooltip" group-hover:opacity-100>
+              {{ copied ? 'Copied' : 'Copy code' }}
+            </div>
+          </a>
+          <a class="o-demo_action_item" group @click="toggle()">
+            <div class="o-demo_action_icon i-carbon:fit-to-width" />
+            <div class="o-demo_tooltip" group-hover:opacity-100>
+              {{ value ? 'Hide code' : 'Show code' }}
+            </div>
+          </a>
+        </div>
+        <div v-show="value" :class="`language-${lang} extra-class`" v-html="decodedHighlightedCode" />
+      </div>
+    </div>
+  </ClientOnly>
+</template>

docs/.vitepress/config.mts

@@ -0,0 +1,100 @@
+import { defineConfig } from 'vitepress'
+import { version } from '../../package.json'
+import { applyPlugins } from './plugins/code'
+
+const components = [
+  { text: 'Accordion', link: '/guide/components/accordion.md' },
+  { text: 'Alert', link: '/guide/components/alert.md' },
+  { text: 'Avatar', link: '/guide/components/avatar.md' },
+  { text: 'Badge', link: '/guide/components/badge.md' },
+  { text: 'Button', link: '/guide/components/button.md' },
+  { text: 'Checkbox', link: '/guide/components/checkbox.md' },
+  { text: 'Divider', link: '/guide/components/divider.md' },
+  { text: 'Icon', link: '/guide/components/icon.md' },
+  { text: 'Input', link: '/guide/components/input.md' },
+  { text: 'Kbd', link: '/guide/components/kbd.md' },
+  { text: 'Modal', link: '/guide/components/modal.md' },
+  { text: 'Switch', link: '/guide/components/switch.md' },
+  { text: 'Tag', link: '/guide/components/tag.md' },
+]
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  vite: { plugins: [] },
+  title: 'Spark UI',
+  description: 'Experience The Magic Of Animated Components. Crafted With Vue, TypeScript, TailwindCss And Vueuse Motion ✨',
+  head: [
+    [
+      'link',
+      {
+        rel: 'icon',
+        type: 'image/svg+xml',
+        href: '/icon.png',
+      },
+    ],
+    ['meta', { property: 'og:type', content: 'website' }],
+    [
+      'link',
+      { href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', rel: 'stylesheet' },
+    ],
+  ],
+  themeConfig: {
+    search: {
+      provider: 'algolia',
+      options: {
+        appId: 'J80WVGDCRV',
+        apiKey: 'ca4b17a48a4b73178c772c805c02a211',
+        indexName: 'ui-windi',
+      },
+    },
+    logo: '../icon.png',
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Guide', items: [
+        { text: 'Introduction', link: '/guide/getting-started/index.md' },
+        { text: 'Installation', link: '/guide/getting-started/installation.md' },
+        { text: 'Theme', link: '/guide/getting-started/theme.md' },
+      ] },
+      { text: 'Components', items: components },
+      { text: 'Showcase', link: '' },
+      { text: `v${version}`, link: '' },
+
+    ],
+
+    sidebar: {
+      '/guide/': [
+        {
+          text: '✨   Getting Started',
+          collapsed: true,
+          items: [
+            { text: 'Introduction', link: '/guide/getting-started/index.md' },
+            { text: 'Installation', link: '/guide/getting-started/installation.md' },
+            { text: 'Theme', link: '/guide/getting-started/theme.md' },
+          ],
+        },
+
+        {
+          text: '📦   Components',
+          collapsed: true,
+          items: components,
+        },
+      ],
+    },
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/selemondev/windi-ui' },
+    ],
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2023-PRESENT Selemon Brahanu',
+    },
+  },
+  markdown: {
+    config: (md) => {
+      applyPlugins(md)
+    },
+    theme: {
+      light: 'vitesse-light',
+      dark: 'vitesse-dark',
+    },
+  },
+})

docs/.vitepress/plugins/code/constants.ts

@@ -0,0 +1,2 @@
+export const FenceDemoTag = 'vue:demo'
+export const DemoTag = 'demo'

docs/.vitepress/plugins/code/fencePlugin.ts

@@ -0,0 +1,19 @@
+import type { MarkdownRenderer } from 'vitepress'
+import { FenceDemoTag } from './constants'
+import { genDemoByCode } from './utils'
+
+export function fencePlugin(md: MarkdownRenderer) {
+  const defaultRender = md.renderer.rules.fence
+
+  md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+    const token = tokens[idx]
+    if (token.info.trim() !== FenceDemoTag)
+      return defaultRender!(tokens, idx, options, env, self)
+
+    const content = token.content
+    const path = env.path
+
+    const demoScripts = genDemoByCode(md, env, path, content)
+    return demoScripts
+  }
+}

docs/.vitepress/plugins/code/index.ts

@@ -0,0 +1,7 @@
+import { fencePlugin } from './fencePlugin'
+import { demoBlockPlugin } from './plugin-demo-block'
+
+export function applyPlugins(md: any) {
+  md.use(fencePlugin)
+  md.use(demoBlockPlugin)
+}

docs/.vitepress/plugins/code/plugin-demo-block.ts

@@ -0,0 +1,64 @@
+import type { AttributeNode, ElementNode } from '@vue/compiler-core'
+import type { MarkdownRenderer } from 'vitepress'
+import { dirname, resolve } from 'node:path'
+import { baseParse } from '@vue/compiler-core'
+import fsExtra from 'fs-extra'
+import { DemoTag } from './constants'
+import { getDemoComponent } from './utils'
+
+function getPropsMap(attrs: AttributeNode[]) {
+  const map: Record<string, string | undefined> = {}
+  for (const { name, value } of attrs)
+    map[name] = value?.content
+
+  return map
+}
+
+export function parseProps(content: string) {
+  const ast = baseParse(content)
+  const demoElement = ast.children[0] as ElementNode
+
+  const props = getPropsMap(demoElement.props as AttributeNode[])
+
+  return props
+}
+
+export function demoBlockPlugin(md: MarkdownRenderer) {
+  const addRenderRule = (type: string) => {
+    const defaultRender = md.renderer.rules[type]
+
+    md.renderer.rules[type] = (tokens, idx, options, env, self) => {
+      const token = tokens[idx]
+      const content = token.content.trim()
+
+      if (!content.startsWith(`<${DemoTag} `))
+        return defaultRender!(tokens, idx, options, env, self)
+
+      const { path } = env
+
+      const props = parseProps(content)
+
+      if (!props.src)
+        return defaultRender!(tokens, idx, options, env, self)
+
+      const frontmatter = env.frontmatter
+
+      const mdDir = dirname(frontmatter.realPath ?? path)
+      const srcPath = resolve(mdDir, props.src)
+      const code = fsExtra.readFileSync(srcPath, 'utf-8')
+
+      const demoScripts = getDemoComponent(md, env, {
+        title: props.title,
+        desc: props.desc,
+        path: srcPath,
+        code,
+        ...props,
+      })
+
+      return demoScripts
+    }
+  }
+
+  addRenderRule('html_block')
+  addRenderRule('html_inline')
+}

docs/.vitepress/plugins/code/types.ts

@@ -0,0 +1,7 @@
+export interface DemoInfos {
+  title?: string
+  desc?: string
+  path: string
+  code: string
+  lang?: string
+}