improve docs and formatting

.vscode/extensions.json

@@ -9,6 +9,7 @@
     "yoavbls.pretty-ts-errors",
     "bradlc.vscode-tailwindcss",
     "vue.volar",
-    "lokalise.i18n-ally"
+    "lokalise.i18n-ally",
+    "DavidAnson.vscode-markdownlint"
   ]
 }

.vscode/settings.json

@@ -18,6 +18,11 @@
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.tabSize": 4,
+    "editor.useTabStops": false
+  },
   "typescript.tsdk": "./src/node_modules/typescript/lib",
   "i18n-ally.enabledFrameworks": ["vue"],
   "i18n-ally.localesPaths": ["src/i18n/locales"],

README.md

@@ -81,7 +81,7 @@ The easiest way to run WireGuard Easy is with Docker Compose.
 
 Just download [`docker-compose.yml`](docker-compose.yml) and execute `sudo docker compose up -d`.
 
-Now setup a reverse proxy to be able to access the Web UI from the internet.
+Now setup a reverse proxy to be able to access the Web UI securely from the internet.
 
 If you want to access the Web UI over HTTP, change the env var `INSECURE` to `true`. This is not recommended. Only use this for testing
 

docs/.prettierrc.json

@@ -0,0 +1,5 @@
+{
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+}

docs/content/advanced/api.md

@@ -2,6 +2,11 @@
 title: API
 ---
 
+/// warning | Breaking Changes
+
+This API is not yet stable and may change in the future. The API is currently in development and is subject to change without notice. The API is not yet documented, but we will add documentation as the API stabilizes.
+///
+
 You can use the API to interact with the application programmatically. The API is available at `/api` and supports both GET and POST requests. The API is designed to be simple and easy to use, with a focus on providing a consistent interface for all endpoints.
 
 There is no documentation for the API yet, but this will be added as the underlying library supports it.

docs/content/advanced/metrics/prometheus.md

@@ -16,15 +16,15 @@ You need to add a scrape config to your Prometheus configuration file. Here is a
 
 ```yaml
 scrape_configs:
-  - job_name: "wg-easy"
+    - job_name: 'wg-easy'
       scrape_interval: 30s
       metrics_path: /metrics/prometheus
       static_configs:
           - targets:
-          - "localhost:51821"
+                - 'localhost:51821'
       authorization:
           type: Bearer
-      credentials: "SuperSecurePassword"
+          credentials: 'SuperSecurePassword'
 ```
 
 ## Grafana Dashboard

docs/content/examples/tutorials/basic-installation.md

@@ -48,6 +48,7 @@ These ports can be changed, so if you change them you have to update your firewa
 
 - To setup traefik follow the instructions here: [Traefik](./traefik.md)
 - To setup caddy follow the instructions here: [Caddy](./caddy.md)
+- If you do not want to use a reverse proxy follow the instructions here: [No Reverse Proxy](./reverse-proxyless.md)
 
 ## Update `wg-easy`
 

docs/content/examples/tutorials/reverse-proxyless.md

@@ -0,0 +1,31 @@
+---
+title: No Reverse Proxy
+---
+
+# asd
+
+/// warning | Insecure
+
+This is insecure. You should use a reverse proxy to secure the connection.
+
+Only use this method if you know what you are doing.
+///
+
+If you only allow access to the web UI from your local network, you can skip the reverse proxy setup. This is not recommended, but it is possible.
+
+## Setup
+
+- Edit the `docker-compose.yml` file and uncomment `environment` and `INSECURE`
+
+- Set `INSECURE` to `true` to allow access to the web UI over a non-secure connection.
+
+- The `docker-compose.yml` file should look something like this:
+
+    ```yaml
+    environment:
+        - INSECURE=true
+    ```
+
+- Save the file and restart `wg-easy`.
+
+- Make sure that the Web UI is not accessible from outside your local network.

docs/content/examples/tutorials/traefik.md

@@ -25,9 +25,9 @@ services:
         container_name: traefik
         restart: unless-stopped
         ports:
-      - "80:80"
-      - "443:443/tcp"
-      - "443:443/udp"
+            - '80:80'
+            - '443:443/tcp'
+            - '443:443/udp'
         volumes:
             - /var/run/docker.sock:/var/run/docker.sock
             - /etc/docker/volumes/traefik/traefik.yml:/traefik.yml:ro
@@ -51,14 +51,14 @@ log:
 
 entryPoints:
     web:
-    address: ":80/tcp"
+        address: ':80/tcp'
         http:
             redirections:
                 entryPoint:
                     to: websecure
                     scheme: https
     websecure:
-    address: ":443/tcp"
+        address: ':443/tcp'
         http:
             middlewares:
                 - compress@file
@@ -100,7 +100,7 @@ http:
         services:
             basicAuth:
                 users:
-          - "$username$:$password$"
+                    - '$username$:$password$'
         compress:
             compress: {}
         hsts:

docs/content/getting-started.md

@@ -43,54 +43,30 @@ All workflows are using the tagging convention listed below. It is subsequently
 
 | tag           | Type                                                       | Example                                                       | Description                                                                                                                          |
 | ------------- | ---------------------------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `15`          | latest minor for that major tag                            | `ghcr.io/wg-easy/wg-easy:15`                                  | latest features for specific major versions, no breaking changes                                                                     |
-| `latest`      | latest tag                                                 | `ghcr.io/wg-easy/wg-easy:latest` or `ghcr.io/wg-easy/wg-easy` | stable as possible get bug fixes quickly when needed, see Releases for more information.                                             |
+| `15`          | latest minor for that major tag                            | `ghcr.io/wg-easy/wg-easy:15`                                  | latest features for specific major versions, no breaking changes, recommended                                                        |
+| `latest`      | latest tag                                                 | `ghcr.io/wg-easy/wg-easy:latest` or `ghcr.io/wg-easy/wg-easy` | points to latest release, can include breaking changes                                                                               |
 | `15.0`        | latest patch for that minor tag                            | `ghcr.io/wg-easy/wg-easy:15.0`                                | latest patches for specific minor version                                                                                            |
-| `15.0.0`      | specific tag                                               | `ghcr.io/wg-easy/wg-easy:15.0.0`                              | specific release, don't use this as this will not get updated                                                                        |
+| `15.0.0`      | specific tag                                               | `ghcr.io/wg-easy/wg-easy:15.0.0`                              | specific release, no updates                                                                                                         |
 | `nightly`     | [`master`](https://github.com/wg-easy/wg-easy/tree/master) | `ghcr.io/wg-easy/wg-easy:nightly`                             | mostly unstable gets frequent package and code updates, deployed against [`master`](https://github.com/wg-easy/wg-easy/tree/master). |
 | `development` | pull requests                                              | `ghcr.io/wg-easy/wg-easy:development`                         | used for development, testing code from PRs before landing into [`master`](https://github.com/wg-easy/wg-easy/tree/master).          |
 
+<!-- ref: major version -->
+
 When publishing a tag we follow the [Semantic Versioning][semver] specification. The `latest` tag is always pointing to the latest stable release. If you want to avoid breaking changes, use the major version tag (e.g. `15`).
 
 [github-ci]: https://github.com/wg-easy/wg-easy/actions
 [ghcr-image]: https://github.com/wg-easy/wg-easy/pkgs/container/wg-easy
 [semver]: https://semver.org/
 
-### Get All Files
-
-Issue the following command to acquire the necessary file:
-
-```shell
-wget "https://raw.githubusercontent.com/wg-easy/wg-easy/master/docker-compose.yml"
-```
-
-### Start the Container
-
-To start the container, issue the following command:
-
-```shell
-sudo docker compose up -d
-```
+### Follow tutorials
 
-### Configuration Steps
+- [Basic Installation with Docker Compose (Recommended)](./examples/tutorials/basic-installation.md)
+- [Simple Installation with Docker Run](./examples/tutorials/docker-run.md)
+- [Advanced Installation with Podman](./examples/tutorials/podman-nft.md)
 
-Now follow the setup process in your web browser
-
-### Stopping the Container
-
-To stop the container, issue the following command:
-
-```shell
-sudo docker compose down
-```
-
-/// danger | Using the Correct Commands For Stopping and Starting `wg-easy`
+/// danger | Use the Correct Commands For Stopping and Starting `wg-easy`
 
 **Use `sudo docker compose up / down`, not `sudo docker compose start / stop`**. Otherwise, the container is not properly destroyed and you may experience problems during startup because of inconsistent state.
 ///
 
 **That's it! It really is that easy**.
-
-If you need more help you can read the [Basic Installation Tutorial][basic-installation].
-
-[basic-installation]: ./examples/tutorials/basic-installation.md

docs/content/guides/2fa.md

@@ -2,4 +2,25 @@
 title: 2FA
 ---
 
-TODO
+The user can enable 2FA from the Account page. The Account page is accessible from the dropdown menu in the top right corner of the application.
+
+## Enable TOTP
+
+- **Enable Two Factor Authentication**: Enable TOTP for the user.
+
+## Configure TOTP
+
+A QR code will be displayed. Scan the QR code with your TOTP application (e.g., Google Authenticator, Authy, etc.) to add the account.
+
+To verify that the TOTP key is working, the user must enter the TOTP code generated by the TOTP application.
+
+- **TOTP Key**: The TOTP key for the user. This key is used to generate the TOTP code.
+- **TOTP Code**: The current TOTP code for the user. This code is used to verify the TOTP key.
+- **Enable Two Factor Authentication**: Enable TOTP for the user.
+
+## Disable TOTP
+
+To disable TOTP, the user must enter the current password.
+
+- **Current Password**: The current password of the user.
+- **Disable Two Factor Authentication**: Disable TOTP for the user.

docs/content/guides/account.md

@@ -1,5 +0,0 @@
----
-title: Edit Account
----
-
-TODO

docs/content/guides/clients.md

@@ -2,4 +2,49 @@
 title: Edit Client
 ---
 
-TODO
+## General
+
+- **Name**: The name of the client.
+- **Enabled**: Whether the client can connect to the VPN.
+- **Expire Date**: The date the client will be disabled.
+
+## Address
+
+- **IPv4**: The IPv4 address of the client.
+- **IPv6**: The IPv6 address of the client.
+
+## Allowed IPs
+
+Which IPs will be routed through the VPN.
+
+This will not prevent the user from modifing it locally and accessing IP ranges that they should not be able to access.
+
+Use firewall rules to prevent access to IP ranges that the user should not be able to access.
+
+## Server Allowed IPs
+
+Which IPs will be routed to the client.
+
+## DNS
+
+The DNS server that the client will use.
+
+## Advanced
+
+- **MTU**: The maximum transmission unit for the client.
+- **Persistent Keepalive**: The interval for sending keepalive packets to the server.
+
+## Hooks
+
+This can only be used for clients that use `wg-quick`. Setting this will throw a error when importing the config on other clients.
+
+- **PreUp**: Commands to run before the interface is brought up.
+- **PostUp**: Commands to run after the interface is brought up.
+- **PreDown**: Commands to run before the interface is brought down.
+- **PostDown**: Commands to run after the interface is brought down.
+
+## Actions
+
+- **Save**: Save the changes made in the form.
+- **Revert**: Revert the changes made in the form.
+- **Delete**: Delete the client.

docs/content/guides/login.md

@@ -1,5 +0,0 @@
----
-title: Login
----
-
-TODO

docs/mkdocs.yml

@@ -1,6 +1,6 @@
-site_name: "wg-easy"
-site_description: "The easiest way to run WireGuard VPN + Web-based Admin UI."
-site_author: "WireGuard Easy"
+site_name: 'wg-easy'
+site_description: 'The easiest way to run WireGuard VPN + Web-based Admin UI.'
+site_author: 'WireGuard Easy'
 copyright: >
     <p>
     &copy <a href="https://github.com/wg-easy"><em>Wireguard Easy</em></a><br/>
@@ -12,9 +12,9 @@ copyright: >
 repo_url: https://github.com/wg-easy/wg-easy
 repo_name: wg-easy
 
-edit_uri: "edit/master/docs/content"
+edit_uri: 'edit/master/docs/content'
 
-docs_dir: "content/"
+docs_dir: 'content/'
 
 site_url: https://wg-easy.github.io/wg-easy
 
@@ -34,7 +34,7 @@ theme:
         - content.code.annotate
     palette:
         # Light mode
-    - media: "(prefers-color-scheme: light)"
+        - media: '(prefers-color-scheme: light)'
           scheme: default
           primary: grey
           accent: red
@@ -42,7 +42,7 @@ theme:
               icon: material/weather-night
               name: Switch to dark mode
         # Dark mode
-    - media: "(prefers-color-scheme: dark)"
+        - media: '(prefers-color-scheme: dark)'
           scheme: slate
           primary: grey
           accent: red