Skip to content

获取最新的 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