ulicraft-server-v1/plan/15-drasl-ui-customization.md

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:

   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:

   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.