docs: update contribution section

Author: hunterliu1003

README.md

@@ -36,9 +36,9 @@ Looking for a Vue 3 version? [It's over here](https://github.com/hunterliu1003/v
 
 You can create a [higher-order component](https://vue-final-modal.org/examples/recommended-use) easily and can customize `template`, `script` and `style` based on your needs.
 
-features:
+## Features
 
-- Support Vue 3 and Vue 2
+- Support `Vue 3` and `Vue 2`
 - Tailwind CSS friendly
 - Renderless component
 - SSR support
@@ -50,216 +50,44 @@ features:
 - Tiny bundle size
 - Accessibility support
 
-## Installation
-
-**Vue 3.0**
-
-version `1.x`, `3.x` is for Vue 3.x.
-
-NPM:
-
-```bash
-npm install vue-final-modal@next --save
-```
-
-Yarn:
-
-```bash
-yarn add vue-final-modal@next
-```
-
-**Vue 2.0**
-
-version `0.x`, `2.x` is for Vue 2.x.
-
-NPM:
+## **Development**
 
 ```bash
-npm install vue-final-modal@latest --save
-```
-
-Yarn:
-
-```bash
-yarn add vue-final-modal@latest
-```
+# Clone repo
+git clone https://github.com/vue-final/vue-final-modal.git
 
-## Registeration
+# Run linter
+yarn lint
 
-### Vue
+# Run unit test
+yarn test
 
-```js
-import VueFinalModal from 'vue-final-modal'
+# Build library
+yarn
+yarn build
 
-Vue.use(VueFinalModal())
-```
-
-### Nuxt
-
-- **Write a plugin `vue-final-modal.js`**
-
-```js
-// plugins/vue-final-modal.js
-import VueFinalModal from 'vue-final-modal/lib'
-
-Vue.use(VueFinalModal())
-```
-
-- **Add plugin into `nuxt.config.js`**
-
-```js
-// nuxt.config.js
-export default {
-  plugins: [{ src: '~plugins/vue-final-modal.js' }],
-  build: {
-    transpile: ['vue-final-modal']
-  }
-}
-```
+# Run examples
+cd examples
+yarn
+yarn serve
 
-### CDN
-
-> [Live demo](https://codepen.io/hunterliu1003/pen/ZEWoYeE)
-
-- **jsDelivr**
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/vue-final-modal"></script>
+# Run docs
+cd docs
+yarn
+yarn dev
 ```
 
-- **Unpkg**
-
-```html
-<script src="https://unpkg.com/vue-final-modal"></script>
-```
-
-## Basic usage
-
-### **Click button to open modal**
-
-```html
-<vue-final-modal v-model="showModal">
-  Modal Content Here
-</vue-final-modal>
-
-<button @click="showModal = true">Launch</button>
-```
-
-### **Open modal with API**
-
-> `v-model` is necessary when you open a modal with `$vfm.show(name)` API.
-
-```html
-<vue-final-modal v-model="showModal" name="example">
-  Modal Content Here
-</vue-final-modal>
-```
-
-```js
-this.$vfm.show('example')
-```
-
-## **Configuration**
-
-> Only work in v0.18+
-
-Configuration options can be passed as a second argument to `Vue.use`.
-
-```js
-import VueFinalModal from 'vue-final-modal'
-
-Vue.use(VueFinalModal(), { ... })
-```
-
-- `componentName`
-- `key`
-- `dynamicContainerName`
-
-## **API**
-
-- In Options API:
-
-Plugin API can be called within any component through `this.$vfm`.
-
-- In Composition API (Vue 3 only):
-
-```js
-import { inject } from 'vue'
-
-export default {
-  setup() {
-    const $vfm = inject('$vfm')
-  }
-}
-```
-
-- `$vfm.show(name, params)`
-- `$vfm.hide([names])`
-- `$vfm.hideAll()`
-- `$vfm.toggle(name, show, params)`
-- `$vfm.get([names])`
-- `$vfm.dynamicModals`
-- `$vfm.openedModals`
-- `$vfm.modals`
-
-## **Props**
-
-- `value`
-- `name`
-- `ssr`
-- `classes`
-- `overlayClass`
-- `contentClass`
-- `styles`
-- `overlayStyle`
-- `contentStyle`
-- `lockScroll`
-- `hideOverlay`
-- `clickToClose`
-- `escToClose`
-- `preventClick`
-- `attach`
-- `transition`
-- `overlayTransition`
-- `zIndexAuto`
-- `zIndexBase`
-- `zIndex`
-- `focusRetain`
-- `focusTrap`
-
-## **Events**
-
-- `@click-outside`
-- `@before-open`
-- `@opened`
-- `@before-close`
-- `@closed`
-
-## **Slots**
-
-If you open a modal though API `show(name, params)`, You can use scoped-slot to get `params` in template:
-
-```html
-<template v-slot="{ params }">
-  <!-- modal content -->
-</template>
-```
-
-Or get `params` on `@beforeOpen` event:
-
-```html
-<vue-final-modal @beforeOpen="e => e.ref.params">
-  <!-- modal content -->
-</vue-final-modal>
-```
+## **Contribution**
 
-> `parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.
+Thank you to all the people who already contributed to `vue-final-modal`!
 
-## **Contribution**
+<a href="https://github.com/vue-final/vue-final-modal/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=vue-final/vue-final-modal" />
+</a>
 
-👋 Hi I'm Hunter, the author of `vue-final-modal`.
+Made with [contributors-img](https://contrib.rocks).
 
-To develop vue-final-modal, I learn a lot from these awesome libraries:
+To develop `vue-final-modal`, I learn a lot from these awesome libraries:
 
 - [Vuetify](https://vuetifyjs.com/en/)
   - attach
@@ -276,4 +104,4 @@ To develop vue-final-modal, I learn a lot from these awesome libraries:
 
 > There is no perfect library even the `final` of vue modal.
 
-If you have any ideas for optimization of `vue-final-modal`, feel free to open [issues](https://github.com/hunterliu1003/vue-final-modal/issues) or [pull requests](https://github.com/hunterliu1003/vue-final-modal/pulls).
+🚀 If you have any ideas for optimization of `vue-final-modal`, feel free to open [issues](https://github.com/hunterliu1003/vue-final-modal/issues) or [pull requests](https://github.com/hunterliu1003/vue-final-modal/pulls).

docs/content/en/index.md

@@ -76,7 +76,13 @@ yarn dev
 
 ## **Contribution**
 
-👋 Hi I'm Hunter, the author of `vue-final-modal`.
+Thank you to all the people who already contributed to `vue-final-modal`!
+
+<a href="https://github.com/vue-final/vue-final-modal/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=vue-final/vue-final-modal" />
+</a>
+
+Made with [contributors-img](https://contrib.rocks).
 
 To develop `vue-final-modal`, I learn a lot from these awesome libraries: