chore: add magic value usages and detail to document

CONTRIBUTING.md

@@ -101,7 +101,7 @@ Each directory under [Apps](Apps) correspond to a CasaOS App. The directory shou
                     en_us: Syncthing Accessible Directory.
         ```
 
-    1. Compose app level
+    2. Compose app level
 
         For the same example, at the bottom of the [`docker-compose.yml` of Syncthing](Apps/Syncthing/docker-compose.yml)
 
@@ -131,6 +131,61 @@ Each directory under [Apps](Apps) correspond to a CasaOS App. The directory shou
             port_map: "8384"                # the port for web UI
         ```
 
+    3. Magic Value
+
+        **Note**: The features is only working in casaos 0.4.4 and newer version.
+
+        For resolves some cases. Casaos provide some magic value to power your application:
+
+        - Any environment variable that user to set
+        - $WEBUI_PORT
+
+        ##### Environment variable
+        > for developer
+
+        your application can read environment variable that user set, such as `OPENAI_API_KEY` from environment variable. It is store in `/etc/casaos/env`. User can set only once and using anywhere. It can be change by api, after change, all application will re up to inject new env var.
+
+        **Note**: change the config didn't change the env var of current container. To set env var, you should use cli to set it.
+
+        #### WEBUI_PORT
+        > for application maintainer
+
+        your `docker-compose.yml` can use `WEBUI_PORT` to set webui port. Casaos will assign a available port for your application. You can use it like this:
+
+        ```yaml
+        ...
+        ports:
+         - target: 5230
+           published: ${WEBUI_PORT}
+           protocol: tcp
+        ...
+        x-casaos:
+            architectures:
+                - amd64
+                - arm64
+                - arm
+        ...
+            port_map: ${WEBUI_PORT}
+        ```
+        or
+        ```yaml
+        ...
+        ports:
+         - target: 5230
+           published: ${WEBUI_PORT:-5230}
+           protocol: tcp
+        ...
+        x-casaos:
+            architectures:
+                - amd64
+                - arm64
+                - arm
+        ...
+            port_map: ${WEBUI_PORT:-5230}
+        ```
+
+        **Note**: the WEBUI_PORT only allocated once. It promise the port is available when allocated. If the port be used by other application. It didn't reallocate a new port.
+
 ## Requirements for Featured Apps
 
 Once in a while, we pick certain apps as featured apps and display them at the AppStore front. The standard for apps to be featured is a bit higher than rest of the apps: