Boxer web UI

The front-end for the ASF Infrastructure Boxer service, built with Svelte 5 and Vite.

It replaces the hand-rolled document.createElement DOM building in htdocs/js/boxer.js with components, and the single boxer.scss stylesheet with a small design-token system that supports light and dark colour schemes.

Layout

webui/
├── index.html          # Vite entry document
├── public/             # copied verbatim into dist/
│   ├── images/         # logo.png, asf.png
│   └── faq.html        # redirect for the old /boxer/faq.html URL
├── src/
│   ├── main.js         # mounts <App/>
│   ├── app.css         # design tokens, reset, shared component classes
│   ├── App.svelte      # boot sequence (the old prime()) and page switch
│   ├── lib/
│   │   ├── api.js      # fetch wrappers + one function per API endpoint
│   │   ├── config.js   # org, OAuth client id, URL builders
│   │   ├── dialogs.js  # promise-based confirm()/alert() replacements
│   │   └── router.js   # ?action=… query-string router
│   ├── components/     # header, footer, stepper, icons, dialogs, repo table
│   └── routes/         # one component per page
└── dist/               # build output (committed; see .gitignore)

Development

npm install
npm run dev      # http://localhost:5173, proxies /api to 127.0.0.1:8080
npm run build    # writes dist/
npm run preview  # serve dist/ locally

npm run dev proxies /api/* to a Boxer server running on port 8080 (see server/boxer.yaml), so the dev server talks to a real backend.

Deployment

npm run build produces a fully static dist/ with relative asset URLs, so it can be served from any sub-path. Point the web server at webui/dist where it currently points at htdocs, keeping the API mounted at api/ next to it — for example https://gitbox.apache.org/boxer/ serving dist/ and https://gitbox.apache.org/boxer/api/… proxied to the Boxer server.

URLs

The ?action=… URLs the old app used are unchanged, because the OAuth providers redirect back to ?action=oauth and people have the others bookmarked:

URLPage
/, ?action=preferencesYour account (or the onboarding step you are on)
?action=verifyRe-verify your GitHub identity
?action=newrepoCreate a repository
?action=defaultbranchChange a repository's default branch
?action=searchUser search (administrators only)
?action=faqFAQ (faq.html redirects here)
?action=oauthOAuth callback, handled during boot

Navigation between them happens client-side; there is no full page load.