Appearance
获取最新的 page ui 文档
bash
git clone https://github.com/AI-FE/page-ui.git
数据分析
最终需要的数据格式
json
{
"ComponentName1": { "description": "string", "api": "string" },
"ComponentName2": { "description": "string", "api": "string" }
}
现有 page ui 中的数据格式
https://github.com/AI-FE/page-ui/tree/main/website/data/docs/landing-page-components
数据处理
让 AI 编写数据转换脚本
md
请帮我写一个 js 脚本,能够遍历 website/data/docs/landing-page-components 下所有的组件文件,按照下面的格式要求输出一份 json 文件:
{
"ComponentName1": { "description": "string", "api": "string" },
"ComponentName2": { "description": "string", "api": "string" }
}
- 其中 ComponentName1 和 ComponentName2 是组件名称,是 landing-page-components 下的每个文件名
- description 是组件的描述,是组件的 mdx 文件中如下结构中的 {{description}}
<component-name.mdx>
--- title: 'ComponentName1'
date: '2025-01-01'
lastmod: '2025-01-01'
tags: - 'guide' - 'components' - 'documentation' - 'landing-page'
---
{{description}}
<ComponentExample previewComponent={<ComponentName1 />}>
`jsx import {ComponentName1} from
'@/components/landing/component-name-1/ComponentName1'; <ComponentName1 /> `
</ComponentExample>
</component-name.mdx>
- api 是组件的 api,是组件的 mdx 文件中的 3 部分内容拼装在一起的:
- ## Usage 的整个内容,在 api 中格式化为: <Usage> usage 具体内容 </Usage>
- ## Examples 的整个内容,在 api 中格式化为: <Examples> examples 具体内容 </Examples>,但是要排除掉<ComponentExample>标签,只包括<ComponentExample>标签中的内容
- ## API Reference 的整个内容,在 api 中格式化为: <PropsReference> props 具体内容 </PropsReference>
执行数据转换脚本
bash
node parser-component.js