add customization section.

webpage/docs/app-customization/chromium-browsers.md

@@ -1,7 +0,0 @@
----
-sidebar_position: 1
----
-
-# Chromium-based Browsers
-
-Custom settings, bookmarks, and persistence across sessions.

webpage/docs/app-customization/customizing-ui.md

@@ -1,7 +0,0 @@
----
-sidebar_position: 4
----
-
-# Customizing the UI
-
-Modifying Neko’s interface, branding, and user experience.

webpage/docs/app-customization/firefox-customization.md

@@ -1,7 +0,0 @@
----
-sidebar_position: 2
----
-
-# Firefox Customization
-
-Specific tweaks for running and configuring Firefox in Neko.

webpage/docs/app-customization/persistent-data-storage.md

@@ -1,7 +0,0 @@
----
-sidebar_position: 3
----
-
-# Persistent Data Storage
-
-How to persist browser data (history, bookmarks, extensions) across sessions.

webpage/docs/customization/README.md

@@ -0,0 +1,62 @@
+# Customization
+
+When you want to customize the Neko virtual environment beyond the server configuration, you can do so by mounting your own files to the container that replace or extend the default files. This allows you to customize the desktop environment, browser settings, and more.
+
+## Supervisord Configuration {#supervisord}
+
+The Neko container uses [supervisord](https://supervisord.org/) to manage the processes inside the container. The search path for the configuration files is `/etc/neko/supervisord/<name>.conf`. You can mount your own `app.conf` file to the directory `/etc/neko/supervisord/` to add a new process to the container.
+
+```config title="supervisord.conf"
+[program:app]
+environment=HOME="/home/%(ENV_USER)s",USER="%(ENV_USER)s",DISPLAY="%(ENV_DISPLAY)s"
+command=/opt/path/to/my-app
+stopsignal=INT
+autorestart=true
+priority=800
+user=%(ENV_USER)s
+stdout_logfile=/var/log/neko/app.log
+stdout_logfile_maxbytes=100MB
+stdout_logfile_backups=10
+redirect_stderr=true
+```
+
+For example, with firefox, you can mount your own `firefox.conf` file to the directory `/etc/neko/supervisord/` to overwrite the default configuration file and modify the command that starts Firefox. Make sure to copy the default configuration file from the container to your local machine first:
+
+```bash
+# Create a container without starting it
+docker create --name neko ghcr.io/m1k1o/neko/firefox:latest
+# Copy the default configuration file to your local machine
+docker cp neko:/etc/neko/supervisord/firefox.conf ./firefox.conf
+# Remove the container
+docker rm -f neko
+```
+
+Then, you can modify the configuration file to your liking and mount your new version to the container:
+
+```yaml title="docker-compose.yaml"
+services:
+  neko:
+    image: "ghcr.io/m1k1o/neko/firefox:latest"
+    restart: "unless-stopped"
+    shm_size: "2gb"
+    ports:
+      - "8080:8080"
+      - "52000-52100:52000-52100/udp"
+    # highlight-start
+    volumes:
+      - "./firefox.conf:/etc/neko/supervisord/firefox.conf"
+    # highlight-end
+    environment:
+      NEKO_DESKTOP_SCREEN: 1920x1080@30
+      NEKO_MEMBER_MULTIUSER_USER_PASSWORD: neko
+      NEKO_MEMBER_MULTIUSER_ADMIN_PASSWORD: admin
+      NEKO_WEBRTC_EPR: 52000-52100
+      NEKO_WEBRTC_ICELITE: 1
+```
+
+## Next Steps
+
+import DocCardList from '@theme/DocCardList';
+import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+
+<DocCardList items={useCurrentSidebarCategory().items}/>

webpage/docs/customization/browsers.md

@@ -1,5 +1,6 @@
 ---
 sidebar_label: "Browsers"
+description: "Customize your browser settings and configurations in Neko."
 ---
 
 import { AppIcon } from '@site/src/components/AppIcon';

webpage/docs/customization/ui.md

@@ -0,0 +1,42 @@
+---
+sidebar_label: "User Interface"
+description: "Customize the Neko user interface with your own UI files."
+---
+
+# Customizing the UI
+
+Currently there is no configuration for customizing the UI of Neko. You need to modify the source code to change the UI.
+
+```bash
+# Clone the repository
+git clone https://github.com/m1k1o/neko
+# Change to the client directory
+cd neko/client
+# Install the dependencies
+npm install
+# Build the project
+npm run build
+```
+
+You can mount your newly created UI files to the container to `/var/www` to overwrite the default files. The Neko web server will automatically reload the new files when they are changed. You can use the following command to mount your new UI files to the container:
+
+```yaml title="docker-compose.yaml"
+services:
+  neko:
+    image: "ghcr.io/m1k1o/neko/firefox:latest"
+    restart: "unless-stopped"
+    shm_size: "2gb"
+    ports:
+      - "8080:8080"
+      - "52000-52100:52000-52100/udp"
+    # highlight-start
+    volumes:
+      - "./client/dist:/var/www"
+    # highlight-end
+    environment:
+      NEKO_DESKTOP_SCREEN: 1920x1080@30
+      NEKO_MEMBER_MULTIUSER_USER_PASSWORD: neko
+      NEKO_MEMBER_MULTIUSER_ADMIN_PASSWORD: admin
+      NEKO_WEBRTC_EPR: 52000-52100
+      NEKO_WEBRTC_ICELITE: 1
+```

webpage/sidebars.ts

@@ -54,6 +54,16 @@ const sidebars: SidebarsConfig = {
             'configuration/plugins',
           ]
         },
+        {
+          type: 'category',
+          label: 'Customization',
+          collapsed: false,
+          link: { type: "doc", id: "customization/README" },
+          items: [
+            'customization/browsers',
+            'customization/ui',
+          ]
+        },
         'migration-from-v2/README',
         'reverse-proxy-setup',
         {
@@ -70,11 +80,6 @@ const sidebars: SidebarsConfig = {
     //},
     //{
     //  type: 'category',
-    //  label: 'Application Customization',
-    //  items: [{ type: "autogenerated", dirName: "app-customization" }]
-    //},
-    //{
-    //  type: 'category',
     //  label: 'Developer Guide',
     //  items: [{ type: "autogenerated", dirName: "developer-guide" }]
     //},