wip: new docs

frontend/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.vitepress/cache
+.yarn

frontend/docs/.vitepress/cache/deps/_metadata.json

@@ -0,0 +1,19 @@
+{
+  "hash": "175b884a",
+  "browserHash": "66b03797",
+  "optimized": {
+    "vue": {
+      "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
+      "file": "vue.js",
+      "fileHash": "6bc8ca95",
+      "needsInterop": false
+    },
+    "@theme/index": {
+      "src": "../../../../node_modules/vitepress/dist/client/theme-default/index.js",
+      "file": "@theme_index.js",
+      "fileHash": "9b5d66a8",
+      "needsInterop": false
+    }
+  },
+  "chunks": {}
+}

frontend/docs/.vitepress/cache/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

frontend/docs/.vitepress/config.ts

@@ -0,0 +1,46 @@
+import {defineConfig} from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+
+function thisYear() {
+    return new Date().getFullYear()
+}
+
+export default defineConfig({
+    lang: 'en-US',
+    title: 'Nginx UI',
+    description: 'Yet another Nginx Web UI',
+    themeConfig: {
+        // https://vitepress.dev/reference/default-theme-config
+        nav: [
+            {text: 'Home', link: '/'},
+            {text: 'Guide', link: '/guide/about'},
+            {text: 'Reference', link: '/reference/api-examples'},
+            {text: 'Demo', link: 'https://nginxui.jackyu.cn'}
+        ],
+
+        sidebar: {
+            '/guide/': [
+                {
+                    text: 'Introduction',
+                    items: [
+                        {text: 'What is Nginx UI?', link: '/guide/about'},
+                        {text: 'Getting Started', link: '/guide/getting-started'},
+                        {text: 'Nginx Proxy Example', link: '/guide/nginx-proxy-example'},
+                        {text: 'Contributing', link: '/guide/contributing'},
+                        {text: 'License', link: '/guide/license'}
+                    ]
+                }
+            ]
+        },
+
+        footer: {
+            message: 'Released under the AGPL-3.0 License.',
+            copyright: 'Copyright © 2021-' + thisYear() + ' Nginx UI Team'
+        },
+
+        socialLinks: [
+            {icon: 'github', link: 'https://github.com/0xJacky/nginx-ui'}
+        ]
+    }
+})

frontend/docs/guide/about.md

@@ -0,0 +1,52 @@
+# What is Nginx UI?
+
+![Dashboard](../public/dashboard_en.png)
+
+Nginx UI is a comprehensive web-based interface designed to simplify the management and configuration of Nginx servers.
+It offers real-time server statistics, AI-powered ChatGPT assistance, one-click deployment, automatic renewal of Let's
+Encrypt certificates, and user-friendly editing tools for website configurations. Additionally, Nginx UI provides
+features such as online access to Nginx logs, automatic testing and reloading of configuration files, a web terminal,
+dark mode, and responsive web design. Built with Go and Vue, Nginx UI ensures a seamless and efficient experience for
+managing your Nginx server.
+
+## Demo
+
+URL：[https://nginxui.jackyu.cn](https://nginxui.jackyu.cn)
+
+- Username：admin
+- Password：admin
+
+## Features
+
+- Online statistics for server indicators such as CPU usage, memory usage, load average, and disk usage.
+- Online ChatGPT Assistant
+- One-click deployment and automatic renewal Let's Encrypt certificates.
+- Online editing websites configurations with our self-designed **NgxConfigEditor** which is a user-friendly block
+  editor for nginx configurations or **Ace Code Editor** which supports highlighting nginx configuration syntax.
+- Online view Nginx logs
+- Written in Go and Vue, distribution is a single executable binary.
+- Automatically test configuration file and reload nginx after saving configuration.
+- Web Terminal
+- Dark Mode
+- Responsive Web Design
+
+## 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)
+- [Vue 3](https://v3.vuejs.org)
+- [Vite](https://vitejs.dev)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Ant Design Vue](https://antdv.com)
+- [vue3-gettext](https://github.com/jshmrtn/vue3-gettext)
+- [vue3-ace-editor](https://github.com/CarterLi/vue3-ace-editor)
+- [Gonginx](https://github.com/tufanbarisyildirim/gonginx)

frontend/docs/guide/contributing.md

@@ -0,0 +1,13 @@
+# 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

frontend/docs/guide/getting-started.md

@@ -0,0 +1,171 @@
+# Getting Started
+
+## Before Use
+
+The Nginx UI follows the Debian web server configuration file standard. Created site configuration files will be placed
+in the `sites-available` folder that under the Nginx configuration folder (auto-detected). The configuration files for
+an enabled site will create a soft link to the `sites-enabled` folder. You may need to adjust the way the configuration
+files are organised.
+
+For non-Debian (and Ubuntu) systems, you may need to change the contents of the `nginx.conf` configuration file to the
+Debian style as shown below.
+
+```nginx
+http {
+	# ...
+	include /etc/nginx/conf.d/*.conf;
+	include /etc/nginx/sites-enabled/*;
+}
+```
+
+For more
+information: [debian/conf/nginx.conf](https://salsa.debian.org/nginx-team/nginx/-/blob/master/debian/conf/nginx.conf#L59-L60)
+
+## Installation
+
+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 / armv5 / armv6 / armv7)
+    - Including but not limited to Debian 7 / 8, Ubuntu 12.04 / 14.04 and later, CentOS 6 / 7, Arch Linux
+- FreeBSD
+- OpenBSD
+- Dragonfly BSD
+- Openwrt
+
+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](#script-for-linux).
+
+## Usage
+
+In the first runtime of Nginx UI, please visit `http://<your_server_ip>:<listen_port>/install`
+in your browser to complete the follow-up configurations.
+
+### From Executable
+
+**Run Nginx UI in Terminal**
+
+```shell
+nginx-ui -config app.ini
+```
+
+Press `Control+C` in the terminal to exit Nginx UI.
+
+**Run Nginx UI in Background**
+
+```shell
+nohup ./nginx-ui -config app.ini &
+```
+
+Stop Nginx UI with the follow commond.
+
+```shell
+kill -9 $(ps -aux | grep nginx-ui | grep -v grep | awk '{print $2}')
+```
+
+### With Systemd
+
+If you are using the [installation script for Linux](#script-for-linux), the Nginx UI will be installed as `nginx-ui`
+service in systemd. Please use the `systemctl` command to control it.
+
+**Start Nginx UI**
+
+```shell
+systemctl start nginx-ui
+```
+
+**Stop Nginx UI**
+
+```shell
+systemctl stop nginx-ui
+```
+
+**Restart Nginx UI**
+
+```shell
+systemctl restart nginx-ui
+```
+
+### With Docker
+
+Our docker image [uozi/nginx-ui:latest](https://hub.docker.com/r/uozi/nginx-ui) is based on the latest nginx image and
+can be used to replace the Nginx on the host. By publishing the container's port 80 and 443 to the host,
+you can easily make the switch.
+
+#### Note
+
+1. When using this container for the first time, ensure that the volume mapped to /etc/nginx is empty.
+2. If you want to host static files, you can map directories to container.
+
+**Docker Deploy Example**
+
+```bash
+docker run -dit \
+  --name=nginx-ui \
+  --restart=always \
+  -e TZ=Asia/Shanghai \
+  -v /mnt/user/appdata/nginx:/etc/nginx \
+  -v /mnt/user/appdata/nginx-ui:/etc/nginx-ui \
+  -v /var/www:/var/www \
+  -p 8080:80 -p 8443:443 \
+  uozi/nginx-ui:latest
+```
+
+## Manual Build
+
+On platforms that do not have an official build version, they can be built manually.
+
+### Prerequisites
+
+- Make
+
+- Golang 1.19+
+
+- node.js 18+
+
+  ```shell
+  npx browserslist@latest --update-db
+  ```
+
+### Build Frontend
+
+Please execute the following command in `frontend` directory.
+
+```shell
+yarn install
+yarn build
+```
+
+### Build Backend
+
+Please build the frontend first, and then execute the following command in the project root directory.
+
+```shell
+go build -o nginx-ui -v main.go
+```
+
+## Script 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
+````

frontend/docs/guide/license.md

@@ -0,0 +1,6 @@
+# License
+
+This project is provided under a GNU Affero General Public License v3.0 license that can be found in
+the [LICENSE](https://github.com/0xJacky/nginx-ui/blob/master/LICENSE) file. By using, distributing, or contributing to
+this project, you agree to the terms and
+conditions of this license.

frontend/docs/guide/nginx-proxy-example.md

@@ -0,0 +1,62 @@
+# Example of Nginx Reverse Proxy
+
+In this guide, we'll walk you through the process of configuring an Nginx server to redirect HTTP traffic to HTTPS and
+set up a reverse proxy for the Nginx UI running on http://127.0.0.1:9000/.
+
+```nginx
+server {
+    listen          80;
+    listen          [::]:80;
+
+    server_name     <your_server_name>;
+    rewrite ^(.*)$  https://$host$1 permanent;
+}
+
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    ''      close;
+}
+
+server {
+    listen  443       ssl http2;
+    listen  [::]:443  ssl http2;
+
+    server_name         <your_server_name>;
+
+    ssl_certificate     /path/to/ssl_cert;
+    ssl_certificate_key /path/to/ssl_cert_key;
+
+    location / {
+        proxy_set_header    Host                $host;
+        proxy_set_header    X-Real-IP           $remote_addr;
+        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
+        proxy_set_header    X-Forwarded-Proto   $scheme;
+        proxy_http_version  1.1;
+        proxy_set_header    Upgrade             $http_upgrade;
+        proxy_set_header    Connection          $connection_upgrade;
+        proxy_pass          http://127.0.0.1:9000/;
+    }
+}
+```
+
+The configuration file consists of two Nginx server blocks. The first server block listens on port 80 (HTTP) and
+redirects all incoming HTTP requests to HTTPS. It also listens for IPv6 addresses. Replace `<your_server_name>` with
+your
+server name.
+
+The second server block listens on port 443 (HTTPS) along with the HTTP/2 protocol. Again, it listens for IPv6 addresses
+as well. Replace `<your_server_name>` with your server name and the paths for the SSL certificate and key with
+`/path/to/ssl_cert` and `/path/to/ssl_cert_key`.
+
+::: warning
+We might need to remove `http2` in `listen 443 ssl http2;` and `listen  [::]:443 ssl http2;` to avoid the warning in
+Nginx v1.24+ versions.
+:::
+
+Additionally, the configuration includes a map directive for setting the value of the `$connection_upgrade` variable
+based on the $http_upgrade variable, which is used for WebSocket connections.
+
+Within the second server block, the location `/` section contains proxy settings to forward requests to the local port
+`9000`. The proxy settings also include a number of headers for proper handling of the forwarded requests, such
+as `Host`,
+`X-Real-IP`, `X-Forwarded-For`, `X-Forwarded-Proto`, `Upgrade`, and `Connection`.

frontend/docs/index.md

@@ -0,0 +1,53 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+title: Nginx UI
+titleTemplate: Yet another Nginx Web UI
+
+hero:
+    name: "Nginx UI"
+    text: "Yet another Nginx Web UI"
+    tagline: Simple, powerful, and fast.
+    actions:
+        -   theme: brand
+            text: Get Started
+            link: /markdown-examples
+        -   theme: alt
+            text: View on Github
+            link: https://github.com/0xJacky/nginx-ui
+
+features:
+    -   icon: 📊
+        title: Online Statistics for Server Indicators
+        details: Monitor CPU usage, memory usage, load average, and disk usage in real-time.
+    -   icon: 💬
+        title: Online ChatGPT Assistant
+        details: Get assistance from an AI-powered ChatGPT directly within the platform.
+    -   icon: 🖱️
+        title: One-Click Deployment and Automatic Renewal
+        details: Easily deploy and auto-renew Let's Encrypt certificates with just one click.
+    -   icon: 🛠️
+        title: Online Editing Websites Configurations
+        details: Edit configurations using our NgxConfigEditor block editor or Ace Code Editor with nginx syntax highlighting.
+    -   icon: 📜
+        title: Online View Nginx Logs
+        details: Access and view your Nginx logs directly online.
+    -   icon: 💻
+        title: Written in Go and Vue
+        details: The platform is built with Go and Vue, and distributed as a single executable binary.
+    -   icon: 🔄
+        title: Automatically Test and Reload Configurations
+        details: Test configuration files and reload nginx automatically after saving changes.
+    -   icon: 🖥️
+        title: Web Terminal
+        details: Access a web-based terminal for easy management.
+    -   icon: 🌙
+        title: Dark Mode
+        details: Enable dark mode for a comfortable user experience.
+    -   icon: 📱
+        title: Responsive Web Design
+        details: Enjoy a seamless experience on any device with responsive web design.
+
+---
+

frontend/docs/reference/api-examples.md

@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

frontend/package.json

@@ -1,54 +1,58 @@
 {
-    "name": "nginx-ui-frontend-next",
+  "name": "nginx-ui-frontend-next",
-    "private": true,
+  "private": true,
-    "version": "1.8.3",
+  "version": "1.8.3",
-    "type": "commonjs",
+  "type": "commonjs",
-    "scripts": {
+  "scripts": {
-        "dev": "vite",
+    "dev": "vite",
-        "build": "vite build",
+    "build": "vite build",
-        "preview": "vite preview",
+    "preview": "vite preview",
-        "gettext:extract": "vue-gettext-extract",
+    "gettext:extract": "vue-gettext-extract",
-        "gettext:compile": "vue-gettext-compile"
+    "gettext:compile": "vue-gettext-compile",
-    },
+    "docs:dev": "vitepress dev docs",
-    "dependencies": {
+    "docs:build": "vitepress build docs",
-        "@ant-design/icons-vue": "^6.1.0",
+    "docs:preview": "vitepress preview docs"
-        "@formkit/auto-animate": "^1.0.0-beta.6",
+  },
-        "@types/lodash": "^4.14.188",
+  "dependencies": {
-        "@types/marked": "^4.0.8",
+    "@ant-design/icons-vue": "^6.1.0",
-        "@types/nprogress": "^0.2.0",
+    "@formkit/auto-animate": "^1.0.0-beta.6",
-        "@types/sortablejs": "^1.15.0",
+    "@types/lodash": "^4.14.188",
-        "ant-design-vue": "^3.2.17",
+    "@types/marked": "^4.0.8",
-        "apexcharts": "^3.36.3",
+    "@types/nprogress": "^0.2.0",
-        "axios": "^1.3.5",
+    "@types/sortablejs": "^1.15.0",
-        "dayjs": "^1.11.7",
+    "ant-design-vue": "^3.2.17",
-        "highlight.js": "^11.7.0",
+    "apexcharts": "^3.36.3",
-        "marked": "^4.2.5",
+    "axios": "^1.3.5",
-        "nprogress": "^0.2.0",
+    "dayjs": "^1.11.7",
-        "pinia": "^2.0.28",
+    "highlight.js": "^11.7.0",
-        "pinia-plugin-persistedstate": "^3.0.2",
+    "marked": "^4.2.5",
-        "reconnecting-websocket": "^4.4.0",
+    "nprogress": "^0.2.0",
-        "vite-plugin-build-id": "^0.2.3",
+    "pinia": "^2.0.28",
-        "vue": "^3.2.47",
+    "pinia-plugin-persistedstate": "^3.0.2",
-        "vue-github-button": "https://github.com/0xJacky/vue-github-button",
+    "reconnecting-websocket": "^4.4.0",
-        "vue-router": "^4.1.6",
+    "vite-plugin-build-id": "^0.2.3",
-        "vue3-ace-editor": "^2.2.2",
+    "vue": "^3.2.47",
-        "vue3-apexcharts": "^1.4.1",
+    "vue-github-button": "https://github.com/0xJacky/vue-github-button",
-        "vue3-gettext": "^2.5.0-alpha.1",
+    "vue-router": "^4.1.6",
-        "vuedraggable": "^4.1.0",
+    "vue3-ace-editor": "^2.2.2",
-        "xterm": "^5.1.0",
+    "vue3-apexcharts": "^1.4.1",
-        "xterm-addon-attach": "^0.8.0",
+    "vue3-gettext": "^2.5.0-alpha.1",
-        "xterm-addon-fit": "^0.7.0"
+    "vuedraggable": "^4.1.0",
-    },
+    "xterm": "^5.1.0",
-    "devDependencies": {
+    "xterm-addon-attach": "^0.8.0",
-        "@vitejs/plugin-vue": "^4.1.0",
+    "xterm-addon-fit": "^0.7.0"
-        "@vitejs/plugin-vue-jsx": "^3.0.1",
+  },
-        "@zougt/vite-plugin-theme-preprocessor": "^1.4.8",
+  "devDependencies": {
-        "less": "^4.1.3",
+    "@vitejs/plugin-vue": "^4.1.0",
-        "typescript": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
-        "unplugin-vue-components": "^0.24.1",
+    "@zougt/vite-plugin-theme-preprocessor": "^1.4.8",
-        "vite": "^4.2.1",
+    "less": "^4.1.3",
-        "vite-plugin-html": "^3.2.0",
+    "typescript": "^5.0.4",
-        "vite-svg-loader": "^4.0.0",
+    "unplugin-vue-components": "^0.24.1",
-        "vue-tsc": "^1.4.2"
+    "vite": "^4.2.1",
-    }
+    "vite-plugin-html": "^3.2.0",
+    "vite-svg-loader": "^4.0.0",
+    "vitepress": "^1.0.0-alpha.74",
+    "vue-tsc": "^1.4.2"
+  }
 }

frontend/src/version.json

@@ -1 +1 @@
-{"version":"1.8.3","build_id":104,"total_build":174}
+{"version":"1.8.3","build_id":105,"total_build":175}

frontend/version.json

@@ -1 +1 @@
-{"version":"1.8.3","build_id":104,"total_build":174}
+{"version":"1.8.3","build_id":105,"total_build":175}