Updated README.md

README.md

@@ -1,78 +1,179 @@
-# Nginx UI
+<div align="center">
+      <img src="/resources/logo.png" alt="Nginx UI Logo">
+</div>
 
-Yet another Nginx Web UI
+# Nginx UI 
 
-Version: 1.2.0
+Yet another Nginx Web UI, developed by [0xJacky](https://jackyu.cn/) and [Hintay](https://blog.kugeek.com/).
+[![Build and Publish](https://github.com/0xJacky/nginx-ui/actions/workflows/build.yml/badge.svg)](https://github.com/0xJacky/nginx-ui/actions/workflows/build.yml)
 
 [简体中文说明](README-zh_CN.md)
 
-## Features
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+      <ul>
+        <li><a href="#features">Features</a></li>
+        <li><a href="#built-with">Internationalization</a></li>
+        <li><a href="#built-with">Built With</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#before-use">Before Use</a></li>
+        <li><a href="#installation">Installation</a></li>
+        <li><a href="#usage">Usage</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#manual-build">Manual Build</a>
+      <ul>
+        <li><a href="#prerequisites">Prerequisites</a></li>
+        <li><a href="#build-frontend">Build Frontend</a></li>
+        <li><a href="#build-backend">Build Backend</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#scripts-for-linux">Scripts for Linux</a>
+      <ul>
+        <li><a href="#prerequisites">Basic Usage</a></li>
+        <li><a href="#build-frontend">More Usage</a></li>
+      </ul>
+    </li>
+    <li><a href="#example-of-nginx-reverse-proxy-configuration">Example of Nginx Reverse Proxy Configuration</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#license">License</a></li>
+  </ol>
+</details>
+
+## About The Project
+
+[![Dashboard](resources/screenshots/dashboard.png)]()
+
+### Features
+
+- Online view of server CPU, Memory, Load Average, Disk Usage and other indicators.
+- One-click deployment and automatic renewal Let's Encrypt certificates.
+- Online editing websites configuration files, the editor support highlight nginx configuration syntax.
+- Written in Go and Vue, distribution is a single executable binary.
+
+### Internationalization
+
+- English
+- Simplified Chinese
+- Traditional Chinese
+
+We welcome translations into any language.
+
+### Built With
+
+- [The Go Programming Language](https://go.dev/)
+- [Gin Web Framework](https://gin-gonic.com)
+- [GORM](http://gorm.io/index.html)
+- [Vue 2](https://vuejs.org)
+- [vue-gettext](https://github.com/Polyconseil/vue-gettext)
+
+## Getting Started
+
+### Before Use
 
-1. Online view of server CPU, Memory, Load Average, Disk Usage and other indicators.
-2. One-click deployment and automatic renewal Let's Encrypt certificates.
-3. Online editing websites configuration files, online editor support highlight nginx configuration syntax.
-4. Written in Go and Vue, distribution is a single executable binary.
-5. Support English and Simplified Chinese.
+The Nginx UI follows the Nginx standard of creating site configuration files in the `sites-available` directory under
+the Nginx configuration directory (auto-detected). The configuration files for an enabled site will create a soft link
+to the `sites-enabled` directory. Therefore, you may need to adjust the way the configuration files are organised.
 
-## Screenshots
+### Installation
 
-### Dashboard
+Nginx UI is available on the following platforms:
 
-![](resources/screenshots/dashboard.png)
+- Mac OS X 10.10 Yosemite and later (amd64 / arm64)
+- Linux 2.6.23 and later (x86 / amd64 / arm64)
+  - Including but not limited to Debian 7 / 8, Ubuntu 12.04 / 14.04 and later, CentOS 6 / 7, Arch Linux
+- FreeBSD (x86 / amd64)
+- OpenBSD (x86 / amd64)
+- Dragonfly BSD (amd64)
 
-### Users Management
+You can visit [latest release](https://github.com/0xJacky/nginx-ui/releases/latest) to download the latest distribution, or just use [installation scripts for Linux](#scripts-for-linux).
 
-![](resources/screenshots/user-list.png)
+### Usage
 
-### Domains Management
+**Manually Install**
 
-![](resources/screenshots/domain-list.png)
+```shell
+nginx-ui -config app.ini
+```
+
+**Installed by script**
 
-### Domain Editor
+```shell
+systemctl start nginx-ui
+```
 
-![](resources/screenshots/domain-edit.png)
+Once the nginx-ui is running, please visit `http://<your_server_ip>:<listen_port>/install`
+in your browser to complete the follow-up configurations.
 
-### Configurations Management
+## Manual Build
 
-![](resources/screenshots/config-list.png)
+On platforms where installation scripts are not supported, they can be built manually.
 
-### Configuration Editor
+### Prerequisites
 
-![](resources/screenshots/config-edit.png)
+- Make
 
-## Note Before Use
+- Golang 1.17+
 
-The Nginx UI follows the Nginx standard of creating site configuration files in the `sites-available` directory under
-the Nginx configuration directory (auto-detected). The configuration files for an enabled site will create a soft link
-to the `sites-enabled` directory. Therefore, you may need to adjust the way the configuration files are organised.
+- node.js 14+
 
-## Install
+  ```shell
+  npx browserslist@latest --update-db
+  ```
 
-Nginx UI is available on the following platforms:
-- Mac OS X 10.10 Yosemite and later（amd64 / arm64）;
-- Linux 2.6.23 and later（x86 / amd64 / arm64）；
-    - Including but not limited to Debian 7 / 8、Ubuntu 12.04 / 14.04 and later、CentOS 6 / 7、Arch Linux；
-- FreeBSD (x86 / amd64)；
-- OpenBSD (x86 / amd64)；
-- Dragonfly BSD (amd64)；
+### Build Frontend
 
-You can visit [latest release](https://github.com/0xJacky/nginx-ui/releases/latest) to download the latest distribution.
+Please execute the following command in `frontend` directory.
 
-### One-click installation shell for Linux
 ```shell
-bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh)
+yarn install
+make translations
+yarn build
 ```
-The default listing port set by one-click install shell is `9000`
-while HTTP challenge port is `9180`,
 
-If a port conflict occurs, please modify `/usr/local/etc/nginx-ui/app.ini` manually,
-and use `systemctl restart nginx-ui` to reload the Nginx UI service.
+### Build Backend
 
-Once the service start successfully, please visit `http://<your_server_ip>:9000/install`
-in your browser to complete the follow-up configurations.
+Please build the frontend first, and then execute the following command in the project root directory.
 
-### Example of Nginx reverse proxy configuration
+```shell
+go build -o nginx-ui -v main.go
 ```
+
+## Scripts for Linux
+
+### Basic Usage
+
+**Install and Upgrade**
+
+```shell
+bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) @ install
+```
+The default listening port is 9000, and the default HTTP Challenge port is 9180. If there is a port conflict, please modify `/usr/local/etc/nginx-ui/app.ini` manually, then use `systemctl restart nginx-ui` to reload the Nginx UI service.
+
+**Remove Nginx UI, except configuration and database files**
+
+```shell
+bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) @ remove
+```
+
+### More Usage
+
+````shell
+bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) @ help
+````
+
+## Example of Nginx Reverse Proxy Configuration
+
+```nginx
 server {
     listen	80;
     listen	[::]:80;
@@ -103,5 +204,18 @@ server {
 }
 ```
 
-## About
-Nginx UI developed by [0xJacky](https://jackyu.cn/) and [Hintay](https://blog.kugeek.com/).
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you  make are **greatly appreciated**.
+
+If you have a suggestion that would make this better,  please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## License
+
+This project is provided under a GNU Affero General Public License v3.0 license that can be found in the [LICENSE](LICENSE) file. By using, distributing, or contributing to this project, you agree to the terms and conditions of this license.