mods
This commit is contained in:
123
plan/15-drasl-ui-customization.md
Normal file
123
plan/15-drasl-ui-customization.md
Normal file
@@ -0,0 +1,123 @@
|
||||
# Drasl Web UI Customization
|
||||
|
||||
> How far you can reskin Drasl's web frontend, and what it costs.
|
||||
> Source repo: <https://github.com/unmojang/drasl> · config docs:
|
||||
> <https://github.com/unmojang/drasl/blob/master/doc/configuration.md>
|
||||
|
||||
## TL;DR
|
||||
|
||||
Drasl has **no theme/plugin system**. You get three tiers, increasing effort:
|
||||
|
||||
1. **Config knobs** (runtime, trivial) — rename instance, toggle footer / 3D bg.
|
||||
2. **Static-asset override** (mount, easy) — swap `style.css`, `logo.svg`, `icon.png`.
|
||||
3. **Template / fork** (build, heavy) — edit `view/*.tmpl`, rebuild the image.
|
||||
|
||||
For a "very noob-friendly UI" the realistic win is **tier 2** (reskin CSS + logo)
|
||||
plus a **dead-simple guide page on the landing site** that walks guests through
|
||||
register → login → upload skin, screenshots included. Drasl's own pages stay the
|
||||
backend; the landing page is where you make it friendly.
|
||||
|
||||
---
|
||||
|
||||
## Tier 1 — Config knobs (config.toml)
|
||||
|
||||
Live in `drasl/config/config.toml.tmpl`. Already rendered into the container at
|
||||
`/etc/drasl/config.toml`. No rebuild — just `docker compose restart drasl`.
|
||||
|
||||
| Option | Default | Effect |
|
||||
|--------|---------|--------|
|
||||
| `InstanceName` | `"Drasl"` | Site name shown in header/title. Set to `"Ulicraft Accounts"`. |
|
||||
| `ApplicationOwner` | `"Anonymous"` | Owner label (already `"Ulicraft"`). |
|
||||
| `EnableBackgroundEffect` | `true` | 3D animated background. Off = cleaner/faster. |
|
||||
| `EnableFooter` | `true` | Footer block. |
|
||||
| `EnableWebFrontEnd` | `true` | Master switch for the whole web UI. |
|
||||
|
||||
Low effort, low ceiling. Does **not** change layout, colors, or copy.
|
||||
|
||||
---
|
||||
|
||||
## Tier 2 — Static-asset override (CSS + logo) ← recommended
|
||||
|
||||
Drasl serves static files from **`DataDirectory`** (default `/usr/share/drasl`).
|
||||
The shipped assets live in the image's `public/`:
|
||||
|
||||
- `style.css` — primary stylesheet (all colors/spacing/theme)
|
||||
- `logo.svg` — header logo
|
||||
- `icon.png` — favicon
|
||||
- `openid-logo.svg` — OIDC button icon (unused here, no OIDC)
|
||||
|
||||
### Plan
|
||||
|
||||
1. Pull the upstream `style.css` as a baseline:
|
||||
<https://raw.githubusercontent.com/unmojang/drasl/master/public/style.css>
|
||||
2. Create `drasl/public/` in this repo. Drop in your edited `style.css`,
|
||||
`logo.svg`, `icon.png`.
|
||||
3. Bind-mount over the container's asset dir in `docker-compose.yml`:
|
||||
|
||||
```yaml
|
||||
drasl:
|
||||
volumes:
|
||||
- ./drasl/config:/etc/drasl:ro
|
||||
- ./drasl/public:/usr/share/drasl/public:ro # <-- add
|
||||
- drasl_state:/var/lib/drasl
|
||||
```
|
||||
|
||||
⚠ **Verify the exact in-container path first** — assets may sit at
|
||||
`/usr/share/drasl/public/` or directly under `/usr/share/drasl/`. Check:
|
||||
|
||||
```bash
|
||||
docker compose exec drasl sh -c 'find /usr/share/drasl -name style.css'
|
||||
```
|
||||
|
||||
Mount to match whatever that prints. Mount the *directory*, not the single
|
||||
file, so the logo/icon ride along.
|
||||
4. `docker compose up -d drasl`. Hard-refresh browser (CSS cache).
|
||||
|
||||
Ceiling: full restyle of existing pages — colors, fonts, button sizes, hide
|
||||
clutter, big friendly upload button. Cannot add/remove page elements or reword
|
||||
text (that's the templates → tier 3).
|
||||
|
||||
---
|
||||
|
||||
## Tier 3 — Templates / fork (heavy)
|
||||
|
||||
Page structure + copy live in Go templates `view/*.tmpl`, **embedded into the
|
||||
binary at build time** (Go `embed.FS`) — not overridable by mounting. Files:
|
||||
|
||||
```
|
||||
root.tmpl user.tmpl player.tmpl registration.tmpl
|
||||
complete-registration.tmpl challenge.tmpl admin.tmpl
|
||||
layout.tmpl header.tmpl footer.tmpl error.tmpl
|
||||
```
|
||||
|
||||
To change them you must **fork + rebuild**:
|
||||
|
||||
1. Fork `unmojang/drasl`.
|
||||
2. Edit `view/*.tmpl` (reword, restructure, add help text/links).
|
||||
3. Build a custom image, push to your registry (or build locally).
|
||||
4. Point `image:` in compose at your fork.
|
||||
|
||||
Maintenance cost: you now track upstream and rebase on releases. Only worth it
|
||||
if tier 2 + landing-page guide aren't enough.
|
||||
|
||||
Alternative to forking: **build a thin custom frontend** that talks to Drasl's
|
||||
HTTP API (see `api.go`) for the one flow guests care about (login + skin
|
||||
upload), hosted at e.g. `${BASE_DOMAIN}/skins`. More code, but total UI control
|
||||
and no upstream coupling. Overkill for 4–10 friends.
|
||||
|
||||
---
|
||||
|
||||
## Recommended path for Ulicraft
|
||||
|
||||
1. **Tier 1**: `InstanceName = "Ulicraft Accounts"`, decide on bg/footer.
|
||||
2. **Tier 2**: reskin `style.css` to match the landing page, swap logo + favicon.
|
||||
3. **Landing-page guide**: add a `/skins` (or `/help`) page on the apex landing
|
||||
site — numbered steps + screenshots: register at `auth.`, log in, upload skin,
|
||||
done. This is what actually makes it noob-friendly; Drasl stays the plumbing.
|
||||
4. Skip tier 3 unless a specific page is confusing enough to justify a fork.
|
||||
|
||||
## Related
|
||||
|
||||
- Skin/cape config flags: see `plan/03-drasl.md` and CLAUDE.md gotchas.
|
||||
- `AllowTextureFromURL = true` lets guests paste a skin URL (e.g. from a skin
|
||||
site) instead of uploading a file — friendlier for non-technical users.
|
||||
Reference in New Issue
Block a user