Skip to content

Commit a7ed356

Browse files
DerGooglerDerGoogler
committed
Update sidebar navigation and add patching documentation for WebUI X
1 parent 2b0f0e6 commit a7ed356

File tree

2 files changed

+268
-9
lines changed

2 files changed

+268
-9
lines changed

‎docs/.vitepress/config/en.ts‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -108,19 +108,12 @@ function sidebarGuide() {
108108
items: [
109109
{
110110
text: "API",
111-
collapsed: true,
112-
items: [
113-
{ text: "ModuleInterface", link: "/guide/webuix/api/ModuleInterface" },
114-
{ text: "FileInterface", link: "/guide/webuix/api/FileInterface" },
115-
{ text: "FileInputInterface", link: "/guide/webuix/api/FileInputInterface" },
116-
{ text: "ApplicationInterface", link: "/guide/webuix/api/ApplicationInterface" },
117-
{ text: "UserManagerInterface", link: "/guide/webuix/api/UserManagerInterface" },
118-
{ text: "PackageManagerInterface", link: "/guide/webuix/api/PackageManagerInterface" },
119-
],
111+
link: "https://docs.mmrl.dev",
120112
},
121113
{ text: "Why WebUI X", link: "/guide/webuix/" },
122114
{ text: "Index Setup", link: "/guide/webuix/index-setup" },
123115
{ text: "Application Info Flags", link: "/guide/webuix/application-info-flags" },
116+
{ text: "Patching", link: "/guide/webuix/patching" },
124117
{ text: "Config", link: "/guide/webuix/config" },
125118
{ text: "Events", link: "/guide/webuix/events" },
126119
{ text: "Sanitized Module ID's", link: "/guide/webuix/sanitized-ids" },

‎docs/en/guide/webuix/patching.md‎

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
# Custom Patching in WebUI X Portable
2+
3+
WebUI X Portable allows you to **extend and customize the UI** by injecting your own **CSS** and **JavaScript**.
4+
This makes it possible to adjust styles, modify layouts, or even add new functionality.
5+
6+
## File Structure
7+
8+
Inside your WebUI X configuration directory, you’ll find a structure like this:
9+
10+
```
11+
/data/adb/.config/<id>/
12+
│
13+
├── js/
14+
│ ├── head/ # Scripts injected into <head>
15+
│ │ └── example-head.js
16+
│ └── body/ # Scripts injected into <body>
17+
│ ├── example-body.js
18+
│ └── example-module.mjs
19+
│
20+
└── style/
21+
└── patch.css # Custom CSS styles
22+
23+
```
24+
25+
- `<id>` = Your module identifier.
26+
- Files in `style/` affect CSS styling.
27+
- Files in `js/head/` load JavaScript into the `<head>` section.
28+
- Files in `js/body/` load JavaScript into the `<body>` section.
29+
30+
## Script Types
31+
32+
The **script type** depends on the file extension you use:
33+
34+
- `*.js` → loaded as a classic script (`<script>`)
35+
- `*.cjs` → loaded as a classic script (`<script>`)
36+
- `*.mjs` → loaded as an ES module (`<script type="module">`)
37+
38+
Use `.mjs` if you need **import/export** or module-based JavaScript.
39+
40+
Example:
41+
42+
- `custom-ui.js` → injected as `<script src="custom-ui.js"></script>`
43+
- `module-example.mjs` → injected as `<script type="module" src="module-example.mjs"></script>`
44+
45+
## CSS Patching
46+
47+
Custom CSS rules go into:
48+
49+
```shell
50+
/data/adb/.config/<id>/style/patch.css
51+
```
52+
53+
Example (`patch.css`):
54+
55+
```css
56+
/* Hide header bar */
57+
.header-bar {
58+
display: none !important;
59+
}
60+
61+
/* Change background color */
62+
body {
63+
background-color: #1e1e2e !important;
64+
}
65+
66+
/* Style buttons */
67+
button {
68+
border-radius: 8px !important;
69+
padding: 6px 12px !important;
70+
}
71+
```
72+
73+
## JavaScript Injection
74+
75+
You can enhance WebUI X Portable by adding your own JavaScript files.
76+
77+
### Head Scripts
78+
79+
Placed in:
80+
81+
```shell
82+
/data/adb/.config/<id>/js/head/
83+
```
84+
85+
- Injected into the `<head>` of the page.
86+
- Best for **libraries, global scripts, or metadata injection**.
87+
88+
#### Example Head Script
89+
90+
File:
91+
92+
```
93+
/data/adb/.config/<id>/js/head/example-head.js
94+
```
95+
96+
```js
97+
// Example head script: Inject Google Fonts
98+
(function () {
99+
let link = document.createElement("link");
100+
link.rel = "stylesheet";
101+
link.href = "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap";
102+
document.head.appendChild(link);
103+
104+
console.log("[WebUI X] Head script loaded: Google Fonts added.");
105+
})();
106+
```
107+
108+
### Body Scripts
109+
110+
Placed in:
111+
112+
```shell
113+
/data/adb/.config/<id>/js/body/
114+
```
115+
116+
- Injected into the `<body>` of the page.
117+
- Best for **UI interactions, DOM manipulation, and runtime logic**.
118+
119+
#### Example Body Script 1 – Custom Button
120+
121+
File:
122+
123+
```
124+
/data/adb/.config/<id>/js/body/custom-button.js
125+
```
126+
127+
```js
128+
// Example body script: Add a floating button
129+
window.addEventListener("DOMContentLoaded", () => {
130+
let btn = document.createElement("button");
131+
btn.textContent = "Click Me!";
132+
btn.style.position = "fixed";
133+
btn.style.bottom = "20px";
134+
btn.style.right = "20px";
135+
btn.style.zIndex = "9999";
136+
btn.style.padding = "10px 16px";
137+
btn.style.borderRadius = "8px";
138+
btn.style.background = "#007bff";
139+
btn.style.color = "#fff";
140+
btn.onclick = () => alert("Hello from WebUI X custom button!");
141+
document.body.appendChild(btn);
142+
143+
console.log("[WebUI X] Body script loaded: Floating button added.");
144+
});
145+
```
146+
147+
#### Example Body Script 2 – Auto Dark Mode
148+
149+
File:
150+
151+
```
152+
/data/adb/.config/<id>/js/body/dark-mode.js
153+
```
154+
155+
```js
156+
// Example body script: Force dark mode
157+
window.addEventListener("DOMContentLoaded", () => {
158+
document.body.style.backgroundColor = "#1e1e2e";
159+
document.body.style.color = "#f8f8f2";
160+
161+
// Invert all images (optional)
162+
document.querySelectorAll("img").forEach((img) => {
163+
img.style.filter = "invert(1) hue-rotate(180deg)";
164+
});
165+
166+
console.log("[WebUI X] Body script loaded: Dark mode applied.");
167+
});
168+
```
169+
170+
#### Example Body Script 3 – Auto-Hide Sidebar
171+
172+
File:
173+
174+
```
175+
/data/adb/.config/<id>/js/body/hide-sidebar.js
176+
```
177+
178+
```js
179+
// Example body script: Hide sidebar by default
180+
window.addEventListener("DOMContentLoaded", () => {
181+
let sidebar = document.querySelector(".sidebar");
182+
if (sidebar) {
183+
sidebar.style.display = "none";
184+
185+
// Add a toggle button
186+
let toggle = document.createElement("button");
187+
toggle.textContent = "Toggle Sidebar";
188+
toggle.style.position = "fixed";
189+
toggle.style.top = "20px";
190+
toggle.style.left = "20px";
191+
toggle.onclick = () => {
192+
sidebar.style.display = sidebar.style.display === "none" ? "block" : "none";
193+
};
194+
document.body.appendChild(toggle);
195+
196+
console.log("[WebUI X] Body script loaded: Sidebar toggle added.");
197+
}
198+
});
199+
```
200+
201+
### Body Module Script Example (`.mjs`)
202+
203+
File:
204+
205+
```
206+
/data/adb/.config/<id>/js/body/example-module.mjs
207+
```
208+
209+
```js
210+
// Example module script using ES modules
211+
import { greet } from "./greet-helper.mjs";
212+
213+
window.addEventListener("DOMContentLoaded", () => {
214+
greet("WebUI X Portable (module script)");
215+
});
216+
```
217+
218+
And a helper file:
219+
220+
```
221+
/data/adb/.config/<id>/js/body/greet-helper.mjs
222+
```
223+
224+
```js
225+
// Example helper module
226+
export function greet(name) {
227+
console.log(`[WebUI X] Hello from ${name}!`);
228+
alert(`Greetings from ${name}!`);
229+
}
230+
```
231+
232+
When `example-module.mjs` runs, it imports `greet()` from `greet-helper.mjs` and calls it.
233+
234+
## Using Eruda (Dev Console)
235+
236+
WebUI X Portable includes **Eruda**, a lightweight developer console, for debugging:
237+
238+
1. Open **Eruda Console**.
239+
2. Inspect elements to find their **class names, IDs, or attributes**.
240+
3. Use this info when writing **CSS rules** or **JavaScript selectors**.
241+
242+
## Example Workflow
243+
244+
1. Navigate to:
245+
246+
```
247+
/data/adb/.config/<id>/
248+
```
249+
250+
2. Edit or create:
251+
252+
- `style/patch.css` for CSS.
253+
- `js/head/*.js` or `*.mjs` for head scripts.
254+
- `js/body/*.js` or `*.mjs` for body scripts.
255+
256+
3. Restart or refresh WebUI X Portable.
257+
4. Verify your changes using **Eruda Console**.
258+
259+
## Tips
260+
261+
- Place each script in its **own file** (`*.js`, `*.cjs`, `*.mjs`) for better management.
262+
- `.js` and `.cjs` are injected as classic scripts, `.mjs` as ES modules.
263+
- Use `console.log()` inside your scripts — messages appear in **Eruda Console** for debugging.
264+
- Always wrap DOM manipulations in `window.addEventListener("DOMContentLoaded", …)` when using **body scripts**.
265+
- Use `!important` in CSS if your styles are overridden by defaults.
266+
- Changes are **instance-specific**; multiple `<id>` folders may need identical patches.

0 commit comments

Comments
 (0)