feat: add catalog rule template

website/catalog/index.md

@@ -4,9 +4,4 @@ Get confused what ast-grep is? This is a list of rewriting rule to inspire you!
 
 Explore the power of ast-grep with these rewriting rules that can transform your code in seconds!
 
-----
-<script setup>
-import Catalog from './Catalog.vue'
-</script>
-
-<Catalog/>
+<!--@include: ./rule-template.md-->

website/catalog/rule-template.md

@@ -0,0 +1,50 @@
+---
+language: JavaScript # please fully spell the language
+playgroundLink: '[TODO]'
+command:  'sg -p [TODO] -r [TODO]'
+hasFix: true
+ruleType: 'pattern' # 'pattern' or 'yaml'
+---
+
+## Your Rule Name
+
+### Description
+
+Some Description for your rule!
+
+
+<!-- Use pattern in the example. Delete this section if use YAML. -->
+### Pattern
+
+```js
+var i = 123
+```
+
+<!-- Optional Fix. Delete this section if no fix available -->
+### Fix
+
+```js
+let i = 123
+```
+
+
+<!-- Use YAML in the example. Delete this section if use pattern. -->
+### YAML
+```yaml
+```
+
+### Example
+
+```js
+var a = 123
+```
+
+### Diff
+<!-- use // [!code --] and // [!code ++] to annotate diff -->
+```js
+var a = 123 // [!code --]
+let a = 123 // [!code ++]
+```
+
+### Contributed by
+[Author Name](https://your-social.link)