Update README.md

README.md

@@ -20,6 +20,10 @@ A fancy, easy-to-use and reactive docker `compose.yaml` stack-oriented manager.
 - Easy-to-use & fancy UI
    - If you love Uptime Kuma's UI/UX, you will love this too
 - Convert `docker run ...` commands into `compose.yaml`
+- File based structure
+   - Dockge won't kidnap your compose files, they stored on your drive as usual. You can interact with them using normal `docker compose` commands   
+   <img src="https://github.com/louislam/dockge/assets/1336778/cc071864-592e-4909-b73a-343a57494002" width=300 />
+
 
 ## 🔧 How to Install
 
@@ -33,7 +37,8 @@ Requirements:
 
 ### Basic
 
-Default stacks directory is `/opt/stacks`.
+- Default Stacks Directory: `/opt/stacks`
+- Default Port: 5001
 
 ```
 # Create a directory that stores your stacks and stores dockge's compose.yaml
@@ -50,6 +55,8 @@ docker compose up -d
 # docker-compose up -d 
 ```
 
+Dockge is now running on http://localhost:5001
+
 ### Advanced
 
 If you want to store your stacks in another directory, you can change the `DOCKGE_STACKS_DIR` environment variable and volumes.
@@ -113,7 +120,7 @@ If you love this project, please consider giving this project a ⭐.
 
 The naming idea was coming from Twitch emotes like `sadge`, `bedge` or `wokege`. They are all ending with `-ge`.
 
-If you are not comfortable with the pronunciation, you can call it `Dockage`
+If you are not comfortable with the pronunciation, you can call it `Dockage`.
 
 #### Can I manage a single container without `compose.yaml`?
 

backend/util-common.ts

@@ -86,8 +86,8 @@ export const TERMINAL_COLS = 105;
 export const TERMINAL_ROWS = 10;
 export const PROGRESS_TERMINAL_ROWS = 8;
 
-export const COMBINED_TERMINAL_COLS = 58;
+export const COMBINED_TERMINAL_COLS = 56;
-export const COMBINED_TERMINAL_ROWS = 20;
+export const COMBINED_TERMINAL_ROWS = 15;
 
 export const ERROR_TYPE_VALIDATION = 1;
 

frontend/src/components/Terminal.vue

@@ -77,8 +77,8 @@ export default {
         }
 
         this.terminal = new Terminal({
-            fontSize: 14,
+            fontSize: 16,
-            fontFamily: "'JetBrains Mono', monospace",
+            fontFamily: "monospace",
             cursorBlink,
             cols: this.cols,
             rows: this.rows,

frontend/src/main.ts

@@ -13,7 +13,6 @@ import Toast, { POSITION, useToast } from "vue-toastification";
 import "xterm/lib/xterm.js";
 
 // CSS
-import "@fontsource/jetbrains-mono";
 import "vue-toastification/dist/index.css";
 import "xterm/css/xterm.css";
 import "./styles/main.scss";

frontend/src/pages/Compose.vue

@@ -592,8 +592,6 @@ export default {
 }
 
 .editor-box {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 14px;
     &.edit-mode {
         background-color: #2c2f38 !important;
     }

frontend/src/pages/DashboardHome.vue

@@ -227,7 +227,5 @@ table {
 .docker-run {
     background-color: $dark-bg !important;
     border: none;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 15px;
 }
 </style>

package.json

@@ -16,7 +16,6 @@
         "mark-as-nightly": "tsx ./extra/mark-as-nightly.ts"
     },
     "dependencies": {
-        "@fontsource/jetbrains-mono": "^5.0.17",
         "@homebridge/node-pty-prebuilt-multiarch": "~0.11.10",
         "@louislam/sqlite3": "~15.1.6",
         "bcryptjs": "~2.4.3",

pnpm-lock.yaml

@@ -5,9 +5,6 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
-  '@fontsource/jetbrains-mono':
-    specifier: ^5.0.17
-    version: 5.0.17
   '@homebridge/node-pty-prebuilt-multiarch':
     specifier: ~0.11.10
     version: 0.11.10
@@ -469,10 +466,6 @@ packages:
       - vue
     dev: true
 
-  /@fontsource/jetbrains-mono@5.0.17:
-    resolution: {integrity: sha512-Y/EtdbwKwNQTGpnMrexX8SVW6Jqlh0nX2bNHI9Z9m6FsyjbocZIFNJqwSY9bDUoi7irGtz8nuidAN7FF8wYuJA==}
-    dev: false
-
   /@fortawesome/fontawesome-common-types@6.4.2:
     resolution: {integrity: sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==}
     engines: {node: '>=6'}