site: add my article (#39607)

* blog: add my article

* site: update article

* site: update article

* feat: update article

* docs: adjust words

* docs: add invite part

Co-authored-by: 二货机器人 <smith3816@gmail.com>

docs/blog/to-be-collaborator.en-US.md

@@ -0,0 +1,159 @@
+---
+title: How to Grow as a Collaborator
+date: 2022-12-08
+author: heiyu4585
+---
+
+Hello everyone, I am [heiyu](https://github.com/heiyu4585). About Ant Design, I believe everyone is very familiar with it. Before I contributed to Ant Design, I have used Ant Design in many background management system projects at work. The biggest feeling for me is that it is easy to use, beautiful, simple and stable. Now that the v5 version has been released, I strongly recommend everyone to try it. I am also fortunate to have developed the v5 version of the `Tour` component and `App` component, as well as some other maintenance work. Let me share with you the PR process of Ant Design, hoping to provide a reference for who are interested in building together for the community.
+
+### Read related articles to familiarize yourself with related concepts
+
+[Contributing](https://ant.design/docs/react/contributing)
+
+[How to gracefully contribute code on github](https://segmentfault.com/a/1190000000736629)
+
+[Become a Community Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
+
+[developer notes](https://github.com/ant-design/ant-design/wiki/Development)
+
+[Some tips about git with PR](https://github.com/ant-design/ant-design/discussions/37051)
+
+## Pull Ant Design code to local
+
+### 1. Fork project
+
+- First you need to fork the project, enter the [project page](https://github.com/ant-design/ant-design), click the [Fork button](https://github.com/ant-design/ant-design/fork)
+- Ant Design link will appear in your github account is https://github.com/heiyu4585/ant-design this project
+- Use the following command on the project address on the local computer: get a github folder
+
+```bash
+git clone https://github.com/[yourGithubAccount]/ant-design.git
+```
+
+Note: `[yourGithubAccount]` changed to your own github username
+
+### 2. Add remote branch address
+
+- Go to the Ant Design folder and add the remote address of Ant Design
+
+```
+cd ant-design
+git remote add upstream https://github.com/ant-design/ant-design
+```
+
+- Pull the latest remote branch version
+
+```bash
+git pull upstream master
+```
+
+Now we are on the master branch from the fork, and this master is reserved for remote code tracking upstream
+
+### 3. Create a new fix branch on github
+
+![image-20221211130607684](https://user-images.githubusercontent.com/10607168/208016775-623abfe7-fa7f-438d-abc3-be445e52d8c5.png)
+
+### 4. Pull the new branch locally
+
+```bash
+git pull
+git checkout fix-branch
+```
+
+Now we can change the code on the branch
+
+## Find the issue on the [Ant Design issue](https://github.com/ant-design/ant-design/issues) page and analyze the selection
+
+To help you start your first attempt, we use [good first issues](https://github.com/ant-design/ant-design/issues?q=is%3Aissue+is%3Aopen+label%3A"good+first+issue") marks bugs and small features that are relatively easy to fix, and these issues are good as your first try. [help wanted](https://github.com/ant-design/ant-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) After all, it is easy to take over as a developer some problems.
+
+![image-20221216111126983](https://user-images.githubusercontent.com/10607168/208016864-fd72d378-a5db-4c20-9a34-b136d5e7c446.png)
+
+## Development Process
+
+1. `npm start` A website running Ant Design locally
+2. As issue mentioned. Debug, fixing or add new feature
+
+## Run test cases and specification checks
+
+1. When add new related test case, also make sure all tests pass `npm run test`. Tips: You can use `npm test -- --watch TestName` to run specified tests during development.
+2. Run `npm test -- -u` to update [jest snapshot](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) and put These updates are also committed (if any).
+3. Make sure your code passes the lint check `npm run lint`.
+
+## Merge changes
+
+- A common problem is that the remote upstream (ant-design/master) has a new update, which will lead to conflicts when we submit the Pull Request, so we can put the commits of other remote developers and our commit is merged.
+
+- Switch to the `master` branch with the following code:
+
+```bash
+git checkout master
+```
+
+- Use the following code to pull the latest code from the remote:
+
+```bash
+git pull upstream master
+```
+
+- switch back to fix-branch
+
+```bash
+git checkout fix-branch
+```
+
+- Merge the `commit` of `master` into `fix-branch`, and resolve conflicts if there are conflicts:
+
+```bash
+git rebase master
+```
+
+- Submit the updated code to your own `fix-branch`:
+
+```bash
+git push origin fix-branch
+```
+
+## Submit a Pull Request
+
+You can switch to the branches page on your github code repository page, click the fix-branch branch, click the `New pull request` button, add relevant comments and submit. Or switch to the code repository of the fix-branch branch, click the `Compare & pull request` button, add relevant comments and submit.
+
+- On the [PR page](https://github.com/ant-design/ant-design/pulls), carefully fill in the submission description according to the default format, and you can refer to the merged PR.
+
+- Check whether all the checks are passed. If you don’t click `details`, check the corresponding error report, and push again after repairing.
+
+![image-20221210233540659](https://user-images.githubusercontent.com/10607168/208016178-5edb30af-7191-4ca0-a2d1-17c833f9ed92.png)
+
+## Accept the maintainer's review and modify it, and wait for the maintainer to merge after passing the test
+
+![image-20221216104628528](https://user-images.githubusercontent.com/10607168/208016926-f8ec6cf3-a599-481f-9611-d894975ab5f5.png)
+
+## Common errors
+
+- PR description is not filled in as required
+
+![image-20221210234139748](https://user-images.githubusercontent.com/10607168/208016993-7b1b6838-5944-4098-85ed-d0ea4567f42f.png)
+
+- Not rebase to latest version
+
+![image-20221210234002553](https://user-images.githubusercontent.com/10607168/208017056-9a209552-29f3-48ab-ad09-90fde458147c.png)
+
+- react 16 test failed
+
+![image-20221212091630186](https://user-images.githubusercontent.com/10607168/208017142-c9ee4169-f2d0-4085-bcff-6c859ec54e71.png)
+
+Repair method:
+
+```bash
+npm run install-react-16
+npm run test component/XXX
+```
+
+## To be collaborator
+
+After a period of continuous maintenance, Collaborators will start the invitation mechanism and initiate a vote in [#3222](https://github.com/ant-design/ant-design/issues/3222). When enough votes are met, you will be officially invited to become a Collaborator.
+
+![Collaborators](https://user-images.githubusercontent.com/5378891/209089697-4fe3f3b3-ef44-4d63-94c2-d93d082c9951.png)
+
+## Don't be afraid to make mistakes, do it bravely, everyone is welcome in the open source world.
+
+![giphy](https://user-images.githubusercontent.com/10607168/208015974-04c3f09b-b5e8-4ef7-af00-0bb5652ec619.gif)

docs/blog/to-be-collaborator.zh-CN.md

@@ -0,0 +1,159 @@
+---
+title: 如何成长为 Collaborator
+date: 2022-12-08
+author: heiyu4585
+---
+
+大家好，我是[黑雨](https://github.com/heiyu4585)。关于 Ant Design，相信大家都非常熟悉，我在很多后台管理系统项目使用过 Ant Design，给我最大的感觉就是好用、好看、简单、稳定。现在 `v5` 版本已经发布，强烈推荐大家试使用，我也有幸开发了 `v5` 版本的 `Tour` 组件和 `App` 组件，以及一些其他维护工作。下面给大家分享一下 Ant Design 的 PR 流程，希望能给有兴趣为社区共建的同学提供一份参考。
+
+## 一. 阅读相关文章熟悉相关概念
+
+[贡献指南](https://ant.design/docs/react/contributing-cn)
+
+[如何优雅地在 github 上贡献代码](https://segmentfault.com/a/1190000000736629)
+
+[成为社区协作成员](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
+
+[开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
+
+[使用 git 创建 PR 的一些建议](https://github.com/ant-design/ant-design/discussions/37051)
+
+## 二. 拉取 Ant Design 代码到本地
+
+### 1. Fork 项目
+
+- 首先需要 fork 项目，进入[项目页面](https://github.com/ant-design/ant-design)，点击右上角的 [Fork 按钮](https://github.com/ant-design/ant-design/fork)
+- 你的 github 帐号中会出现 Ant Design 链接是 https://github.com/heiyu4585/ant-design 这个项目
+- 在本地电脑上项目地址使用以下命令：得到一个 github 文件夹
+
+```bash
+git clone https://github.com/[yourGithubAccount]/ant-design.git
+```
+
+注意： `[yourGithubAccount]` 改为自己的 github 用户名
+
+### 2. 添加远端分支地址
+
+- 进入 Ant Design 文件夹，添加 Ant Design 的远程地址
+
+```bash
+cd ant-design
+git remote add upstream https://github.com/ant-design/ant-design
+```
+
+- 拉取最新的远端分支版本
+
+```bash
+git pull upstream master
+```
+
+现在我们在 fork 来的 master 分支上，这个 master 留作跟踪 upstream 的远程代码
+
+### 3. 在 github 上创建新 fix 分支
+
+![image-20221211130607684](https://user-images.githubusercontent.com/10607168/208016775-623abfe7-fa7f-438d-abc3-be445e52d8c5.png)
+
+### 4. 在本地拉取新分支
+
+```bash
+git pull
+git checkout fix-branch
+```
+
+现在我们可以在分支上更改代码了
+
+## 三. 在[Ant Design 的 issue](https://github.com/ant-design/ant-design/issues)页找到 issue 并分析选择
+
+为了能帮助你开始你的第一次尝试，我们用 [good first issues](https://github.com/ant-design/ant-design/issues?q=is%3Aissue+is%3Aopen+label%3A"good+first+issue") 标记了一些比较容易修复的 bug 和小功能，这些 issue 可以很好地作为你的首次尝试。[help wanted](https://github.com/ant-design/ant-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) 是作为开发者比较容易接手的一些问题。
+
+![image-20221216111126983](https://user-images.githubusercontent.com/10607168/208016864-fd72d378-a5db-4c20-9a34-b136d5e7c446.png)
+
+## 四. 开发流程
+
+1. `npm start` 在本地运行 Ant Design 的网站
+2. 按照 issue 描述调试、修复问题或者开发新的 feature
+
+## 五. 运行测试用例及规范检查
+
+1. 在添加 issue 相关测试用例同时，确认所有的测试都是通过的 `npm run test`。 小贴士：开发过程中可以用 `npm test -- --watch TestName` 来运行指定的测试。
+2. 运行 `npm test -- -u` 来更新 [jest snapshot](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) 并且把这些更新也提交上来（如果有的话）。
+3. 确保你的代码通过了 lint 检查 `npm run lint`。
+
+## 六. 合并修改
+
+- 一个常见的问题是远程的 upstream (ant-design/master) 有了新的更新，从而会导致我们提交的 Pull Request 时会导致冲突，因此我们可以在提交前先把远程其他开发者的 commit 和我们的 commit 合并。
+
+- 使用以下代码切换到 `master` 分支：
+
+```bash
+git checkout master
+```
+
+- 使用以下代码拉出远程的最新代码：
+
+```bash
+git pull upstream master
+```
+
+- 切换回 fix-branch
+
+```bash
+git checkout fix-branch
+```
+
+- 把 `master` 的 `commit `合并到 `fix-branch`，有冲突解决冲突：
+
+```bash
+git rebase master
+```
+
+- 把更新代码提交到自己的 `fix-branch` 中:
+
+```bash
+git push origin fix-branch
+```
+
+## 七. 提交 Pull Request
+
+你可以在你的 github 代码仓库页面切换到 branches 页面点击 fix-branch 分支后点击 `New pull request` 按钮，添加相关注释后提交. 或者切换到 fix-branch 分支的代码仓库点击 `Compare & pull request` 按钮，添加相关注释后提交.
+
+- [PR 页面](https://github.com/ant-design/ant-design/pulls) 上按照默认格式认真填写提交描述，可以参考已经 merge 的 PR。
+
+- 查看 checks 是否全部通过，如果没有点 `details` 就去查看对应的报错，修复后重新 push。
+
+![image-20221210233540659](https://user-images.githubusercontent.com/10607168/208016178-5edb30af-7191-4ca0-a2d1-17c833f9ed92.png)
+
+## 八. 接受维护者的 review 并修改，合格后等待维护者 merge
+
+![image-20221216104628528](https://user-images.githubusercontent.com/10607168/208016926-f8ec6cf3-a599-481f-9611-d894975ab5f5.png)
+
+## 九. 常见错误
+
+- PR 描述未按要求填写
+
+![image-20221210234139748](https://user-images.githubusercontent.com/10607168/208016993-7b1b6838-5944-4098-85ed-d0ea4567f42f.png)
+
+- 未 rebase 到最新版本
+
+![image-20221210234002553](https://user-images.githubusercontent.com/10607168/208017056-9a209552-29f3-48ab-ad09-90fde458147c.png)
+
+- react 16 test 未通过
+
+![image-20221212091630186](https://user-images.githubusercontent.com/10607168/208017142-c9ee4169-f2d0-4085-bcff-6c859ec54e71.png)
+
+修复方法：
+
+```
+npm run install-react-16
+npm run test componet/XXX
+```
+
+## 十. 成为 Collaborator
+
+当持续维护一段时候后，Collaborator 会启动邀请机制，在 [#3222](https://github.com/ant-design/ant-design/issues/3222) 中发起投票。当满足足够票数后，会正式邀请你成为 Collaborator。
+
+![Collaborators](https://user-images.githubusercontent.com/5378891/209089697-4fe3f3b3-ef44-4d63-94c2-d93d082c9951.png)
+
+## 不要怕犯错误，勇敢地去做，开源世界欢迎大家。
+
+![giphy](https://user-images.githubusercontent.com/10607168/208015974-04c3f09b-b5e8-4ef7-af00-0bb5652ec619.gif)