feat: docs

nigiwen · Apr 30, 2024 · 01b69fb · 01b69fb
1 parent 8436038
commit 01b69fb
Show file tree

Hide file tree

Showing 13 changed files with 300 additions and 127 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,8 +1,21 @@
+import path from 'node:path'
+import fs from 'node:fs'
 import type { DefaultTheme } from 'vitepress'
 import { defineConfig } from 'vitepress'
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
+import mdContainer from 'markdown-it-container'
+import MarkdownIt from 'markdown-it'
+import Shiki from '@shikijs/markdown-it'
 import { version } from '../../package.json'
 
+const md = MarkdownIt()
+md.use(await Shiki({
+  themes: {
+    light: 'github-light',
+    dark: 'github-dark',
+  },
+}))
+
 const ogUrl = '//'
 const ogImage = `${ogUrl}og.png#1`
 const title = 'ElemFormily'
@@ -84,14 +97,51 @@ export default defineConfig({
 
   markdown: {
     theme: {
-      light: 'vitesse-light',
-      dark: 'vitesse-dark',
+      light: 'github-light',
+      dark: 'github-dark',
     },
     codeTransformers: [
       transformerTwoslash({
         processHoverInfo: info => info.replace(/_unocss_core\./g, ''),
       }),
     ],
+    config: (md) => {
+      md.use(mdContainer, 'demo', {
+        validate(params: string) {
+          return !!params.trim().match(/^demo\s*(.*)$/)
+        },
+
+        render(tokens: { [key: string]: any }, idx: number) {
+          const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/)
+          if (tokens[idx].nesting === 1 /* means the tag is opening */) {
+            const description = m && m.length > 1 ? m[1] : ''
+            const sourceFileToken = tokens[idx + 2]
+            let source = ''
+            const sourceFile = sourceFileToken.children?.[0].content ?? ''
+
+            if (sourceFileToken.type === 'inline') {
+              source = fs.readFileSync(
+                path.resolve(path.resolve('../docs'), 'examples', `${sourceFile}.vue`),
+                'utf-8',
+              )
+            }
+            if (!source)
+              throw new Error(`没找到文件: ${sourceFile}`)
+
+            return `
+              <DemoCard
+                source="${encodeURIComponent(source)}" 
+                path="${sourceFile}"
+                description="${encodeURIComponent(md.render(description))}"
+              >
+            `
+          }
+          else {
+            return '</DemoCard>'
+          }
+        },
+      })
+    },
   },
 
   themeConfig: {

diff --git a/docs/.vitepress/theme/components/DemoCard.vue b/docs/.vitepress/theme/components/DemoCard.vue
@@ -1,15 +1,27 @@
 <script setup lang='ts'>
 import { CaretTop } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
 import { codeToHtml } from 'shiki'
 import { useData } from 'vitepress'
 
 const props = defineProps<{
   path: string
+  source: string
+  description: string
 }>()
 
-const demo = computed(() => {
+const { copy, isSupported } = useClipboard({
+  source: decodeURIComponent(props.source),
+  read: false,
+})
+const { isDark } = useData()
+const [sourceVisible, toggleSourceVisible] = useToggle()
+const sourceCodeRef = ref<HTMLButtonElement>()
+const code = ref()
+
+const Demo = computed(() => {
   try {
-    const modules: any = import.meta.glob('../../../examples/*/*.vue', { eager: true })
+    const modules = import.meta.glob<any>('../../../examples/*/*.vue', { eager: true })
 
     const key = Object.keys(modules).find(item => item.includes(props.path))
 
@@ -23,51 +35,38 @@ const demo = computed(() => {
   }
 })
 
-async function copyCode() {
+const decodedDescription = computed(() =>
+  decodeURIComponent(props.description!),
+)
 
-}
-const { isDark } = useData()
 watch(isDark, (val) => {
   decoded(val)
 }, { immediate: true })
-const [sourceVisible, toggleSourceVisible] = useToggle()
-const sourceCodeRef = ref<HTMLButtonElement>()
-const code = ref()
+
 async function decoded(isDark: boolean) {
-  const html = await codeToHtml(`  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>
-  <div>3434341212</div>`, {
-    lang: 'html',
-    theme: isDark ? 'vitesse-dark' : 'vitesse-light',
-  })
+  const html = await codeToHtml(
+    decodeURIComponent(props.source),
+    {
+      lang: 'vue',
+      theme: isDark ? 'github-dark' : 'github-light',
+    },
+  )
   code.value = html
 }
 
+async function copyCode() {
+  if (!isSupported)
+    ElMessage.error('复制失败，请手动复制')
+
+  try {
+    await copy()
+    ElMessage.success('复制成功')
+  }
+  catch (e: any) {
+    ElMessage.error(e.message)
+  }
+}
+
 function onSourceVisibleKeydown(e: KeyboardEvent) {
   if (['Enter', 'Space'].includes(e.code)) {
     e.preventDefault()
@@ -78,76 +77,81 @@ function onSourceVisibleKeydown(e: KeyboardEvent) {
 </script>
 
 <template>
-  <div class="example">
-    <div class="example-showcase">
-      <component :is="demo" v-if="demo" v-bind="$attrs" />
-    </div>
+  <ClientOnly>
+    <!-- danger here DO NOT USE INLINE SCRIPT TAG -->
+    <p text="sm" v-html="decodedDescription" />
 
-    <ElDivider class="!m-0" />
-
-    <div class="op-btns">
-      <ElTooltip
-        content="复制代码"
-        :show-arrow="false"
-        :trigger="['hover', 'focus']"
-        :trigger-keys="[]"
-      >
-        <ElIcon
-          :size="16"
-          aria-label="复制代码"
-          class="op-btn"
+    <div class="example">
+      <div class="example-showcase">
+        <component :is="Demo" v-if="Demo" v-bind="$attrs" />
+      </div>
+
+      <ElDivider class="!m-0" />
+
+      <div class="op-btns">
+        <ElTooltip
+          content="复制代码"
+          :show-arrow="false"
+          :trigger="['hover', 'focus']"
+          :trigger-keys="[]"
+        >
+          <ElIcon
+            :size="16"
+            aria-label="复制代码"
+            class="op-btn"
+            tabindex="0"
+            role="button"
+            @click="copyCode"
+            @keydown.prevent.enter="copyCode"
+            @keydown.prevent.space="copyCode"
+          >
+            <div i-ri-file-copy-line />
+          </ElIcon>
+        </ElTooltip>
+        <ElTooltip
+          content="查看源代码"
+          :show-arrow="false"
+          :trigger="['hover', 'focus']"
+          :trigger-keys="[]"
+        >
+          <button
+            ref="sourceCodeRef"
+            :aria-label="
+              sourceVisible ? '隐藏源代码' : '查看源代码'
+            "
+            class="reset-btn el-icon op-btn"
+            @click="toggleSourceVisible()"
+          >
+            <ElIcon :size="16">
+              <div i-ri-code-line />
+            </ElIcon>
+          </button>
+        </ElTooltip>
+      </div>
+
+      <ElCollapseTransition>
+        <div v-show="sourceVisible" class="example-source-wrapper">
+          <div class="example-source language-vue" v-html="code" />
+        </div>
+      </ElCollapseTransition>
+
+      <Transition name="el-fade-in-linear">
+        <div
+          v-show="sourceVisible"
+          class="example-float-control"
           tabindex="0"
           role="button"
-          @click="copyCode"
-          @keydown.prevent.enter="copyCode"
-          @keydown.prevent.space="copyCode"
-        >
-          <div i-ri-file-copy-line />
-        </ElIcon>
-      </ElTooltip>
-      <ElTooltip
-        content="查看源代码"
-        :show-arrow="false"
-        :trigger="['hover', 'focus']"
-        :trigger-keys="[]"
-      >
-        <button
-          ref="sourceCodeRef"
-          :aria-label="
-            sourceVisible ? '隐藏源代码' : '查看源代码'
-          "
-          class="reset-btn el-icon op-btn"
-          @click="toggleSourceVisible()"
+          @click="toggleSourceVisible(false)"
+          @keydown="onSourceVisibleKeydown"
         >
           <ElIcon :size="16">
-            <div i-ri-code-line />
+            <CaretTop />
           </ElIcon>
-        </button>
-      </ElTooltip>
+          <span>{{ '隐藏源代码' }}</span>
+        </div>
+      </Transition>
     </div>
-
-    <ElCollapseTransition>
-      <div v-show="sourceVisible" class="example-source-wrapper">
-        <div class="example-source language-vue" v-html="code" />
-      </div>
-    </ElCollapseTransition>
-
-    <Transition name="el-fade-in-linear">
-      <div
-        v-show="sourceVisible"
-        class="example-float-control"
-        tabindex="0"
-        role="button"
-        @click="toggleSourceVisible(false)"
-        @keydown="onSourceVisibleKeydown"
-      >
-        <ElIcon :size="16">
-          <CaretTop />
-        </ElIcon>
-        <span>{{ '隐藏源代码' }}</span>
-      </div>
-    </Transition>
-  </div>
+  </ClientOnly>
 </template>
 
 <style scoped lang='scss'>

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -5,9 +5,7 @@ import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import UnoCSSLayout from './UnoCSSLayout.vue'
 import '@shikijs/vitepress-twoslash/style.css'
 
-import './rainbow.css'
-import './vars.css'
-import './overrides.css'
+import './styles/index.scss'
 import 'uno.css'
 
 let homePageStyle: HTMLStyleElement | undefined

diff --git a/docs/.vitepress/theme/styles/element-plus-var.scss b/docs/.vitepress/theme/styles/element-plus-var.scss
@@ -0,0 +1,46 @@
+$-colors: (
+  'primary': (
+    'base': #1677ff,
+  ),
+  'success': (
+    'base': #52c41a,
+  ),
+  'warning': (
+    'base': #faad14,
+  ),
+  'danger': (
+    'base': #ff4d4f,
+  ),
+  'error': (
+    'base': #ff4d4f,
+  ),
+);
+$border-radius: (
+  'base': '6px',
+);
+$text-color: (
+  'primary': rgb(0 0 0 / 88%),
+  'regular': rgb(0 0 0 / 88%),
+);
+$transition-duration: (
+  '': 0.1s,
+  'fast': 0s,
+);
+$table: (
+  'header-bg-color': '#F5F7FA',
+  'header-text-color': 'rgb(0 0 0 / 88%)',
+);
+$dialog: (
+  'margin-top': 10vh,
+);
+
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: $-colors,
+  $border-radius: $border-radius,
+  $text-color: $text-color,
+  $transition-duration: $transition-duration,
+  $table: $table,
+  $dialog: $dialog
+);
+@use 'element-plus/theme-chalk/src/index.scss' as *;
+@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
diff --git a/docs/.vitepress/theme/styles/index.scss b/docs/.vitepress/theme/styles/index.scss
@@ -0,0 +1,4 @@
+@import './element-plus-var.scss';
+@import './overrides.scss';
+@import './rainbow.scss';
+@import './vars.scss';