docs: add rule docs (#17)

* docs: add rule docs

* update: add a single newline in the end of waf-rule

* docs: remove the caution in waf rule

* docs: add features to feature list

docs/ip-rule.mdx

@@ -0,0 +1,15 @@
+---
+title: IP Rule
+description: Learn how to config IP rules in CasWAF.
+keywords: [caswaf]
+authors: [casbin]
+---
+CasWAF provides a powerful IP rule feature to help you control the access of your website. You can add IP rules to allow or block specific IP addresses or IP ranges (CIDR only).
+
+![ip-rule](/img/rules/ip-rule.jpg)
+
+## IP Expression properties
+
+- `Name`: The name of the expression. It is used to identify the rule and have no effect on the rule itself.
+- `Operator`: The operator of the expression. It can be set to `is in` or `is not in`.
+- `Value`: The value of the expression. It can be set to IPv4 or IPv6 addresses or CIDR ranges (even mixed).

docs/rule.mdx

@@ -0,0 +1,45 @@
+---
+title: Rule List
+description: Learn how to add your server's rule in CasWAF.
+keywords: [caswaf]
+authors: [casbin]
+---
+If you want your website under protection, you can add your rules in CasWAF.
+
+This section will provide a detailed explanation of the properties and usage of `Rule`.
+
+## Rule properties
+
+- `Name`: The name of the rule.
+- `Type`: The type of the rule. It can be set to `IP`, `User-Agent` and `WAF`.
+- `Expressions`: The expressions contains the rule's conditions, including `operator` and `value`.
+- `Action`: The action of the rule. It can be set to `Allow` or `Block`.
+- `Reason`: The reason of the rule. When the rule is hitted and its action is `Block`, CasWAF would reply a 403 response with the reason.
+
+## Manage Rules
+
+![rules](/img/rules/rules.jpg)
+
+In the Rules page, you will see all rules you have created. You can create, edit, delete and view the rule details. But now we don't have any rules.
+
+## Add a rule
+
+![addrule](/img/rules/addrule.jpg)
+
+Just click the `Add` button, you will create a rule. The created rule will have some default information that you can modify.
+
+## Edit rule
+
+After you create a rule, you can click the `edit` button to edit the rule.
+
+![editrule](/img/rules/editrule.jpg)
+
+Each field's meaning is as described above, and you can freely modify them according to the actual situation of your website.
+
+### Expressions
+
+![expressions](/img/rules/expressions.jpg)
+
+Click the `Add` button in the `Expressions` section, you Kcan add a new expression to the rule.
+
+Click the `Restore` button in the `Expressions` section, you can restore the default expressions of the rule.

docs/site.mdx

@@ -19,7 +19,8 @@ This section will provide a detailed explanation of the properties and usage of
   - e.g. `localhost:8080`
 - `Public IP (Optional)`: The public IP of the site (if available).
 - `Node (Optional)`: The name of the host on which the site is deployed.
-- `Enable WAF`: Whether this site uses a built-in firewall.
+- `Rules`: The rules used in the site to handle requestions. Users can select the rules from the dropdown list.
+  - About how to add rules, please refer to [Rule List](/docs/rule).
 - `SSL mode`: The SSL mode of the site. It can be `HTTP` or `HTTPS and HTTP` or `HTTPS Only`.
   - `HTTP`: The site is not using SSL. Users can access the site **only** via HTTP.
   - `HTTPS and HTTP`: The site is using SSL and HTTP. Users can access the site via **both** HTTP and HTTPS.

docs/ua-rule.mdx

@@ -0,0 +1,15 @@
+---
+title: User-Agent Rule
+description: Learn how to config User-Agent rules in CasWAF.
+keywords: [caswaf]
+authors: [casbin]
+---
+CasWAF provides a User-Agent rule feature to help you control the access of your website. You can add User-Agent rules to allow or block specific User-Agents.
+
+![ua-rule](/img/rules/ua-rule.jpg)
+
+## User-Agent Expression properties
+
+- `Name`: The name of the expression. It is used to identify the rule and have no effect on the rule itself.
+- `Operator`: The operator of the expression. It can be set to `equals`, `does not equals`, `contains`, `does not contain` and `regex match`.
+- `Value`: The value of the expression. It can be set to any string. The default value is your current User-Agent. If you are using `regex match`, the value should be a regular expression.

docs/waf-rule.mdx

@@ -0,0 +1,24 @@
+---
+title: WAF Rule
+description: Learn how to config WAF rules in CasWAF.
+keywords: [caswaf]
+authors: [casbin]
+---
+CasWAF use coraza WAF as the WAF engine, you can follow the [coraza seclang documents](https://coraza.io/docs/seclang/) to write your WAF rules.
+
+## WAF Expression properties
+
+- `Value`: The value of the rule. It should be a valid coraza WAF rule.
+
+## Supported disruptive actions
+
+| Seclang action | CasWAF action | Status code |
+| ----|------|---- |
+| allow | Allow | 200 |
+| block | Block | 403 |
+| deny | Deny | 403 |
+| drop | Drop | 400 |
+
+:::info
+We recommend that you have a good understanding of the coraza WAF rules before you write your own rules.
+:::

sidebars.js

@@ -38,6 +38,17 @@ module.exports = {
         "cert",
       ],
     },
+    {
+      type: "category",
+      label: "Rules",
+      link: {type: "generated-index"},
+      items: [
+        "rule",
+        "ip-rule",
+        "ua-rule",
+        "waf-rule",
+      ],
+    },
     // {
     //   type: "category",
     //   label: "",

src/components/HomepageFeatures/index.js

@@ -7,40 +7,38 @@ import {useColorMode} from "@docusaurus/theme-common";
 const FeatureList = [
   {
     title: translate({
-      message: "Feature 1",
+      message: "Easy to Use",
     }),
     path: "/img/model",
     description: (
       <>
         <Translate>
-          detail description
+          Within a few steps, we can setup a CasWAF app and protect our websites.
         </Translate>
       </>
     ),
   },
   {
     title: translate({
-      message: "Feature 2",
+      message: "Frontend Backend Separation",
     }),
     path: "/img/storage",
     description: (
       <>
         <Translate>
-          detail description
+          CasWAF has a front-end back-end separation architecture, with maneuverable web UI and supporting high concurrency.
         </Translate>
       </>
     ),
   },
   {
     title: translate({
-      message: "Feature 3",
+      message: "Supporting Multi-Language",
     }),
     path: "/img/language",
     description: (
       <>
-        <Translate>
-          detail description
-        </Translate>
+        <Translate> CasWAF is supporting multi-languages, using i18n to support multi-languages UI. For more languages support, welcome to propose in</Translate> <a href="https://github.com/casbin/caswaf/"><Translate> our community</Translate></a>.
       </>
     ),
   },