83c59522e7
Not new features — motion, focus, and depth, kept restrained. - Motion tokens: one easing curve and three durations, used everywhere, so the app moves as a single thing rather than component by component. Honours prefers-reduced-motion by disabling all of it. - View transitions: navigating fades and rises the content instead of swapping it, and each view starts scrolled to the top. - Topbar frosts once the content scrolls, so the header separates from the page without a permanent bar of chrome. - Featured area on Home: the item you are most likely to act on (something in progress, else the newest), with the cover as an ambient blurred wash. The colour comes from the artwork, not a decorative gradient, so it belongs to whatever is on screen. - Cards: lift and scale on hover, a scrim so the action glyph always has contrast, a kind-appropriate glyph (play / read / expand), press feedback, and a visible keyboard focus ring. - Shelves: edge fades and arrow buttons that appear only when the row actually continues that way; the scrollbar is hidden and the row snaps. - Item page: ambient wash from its own cover. - Global :focus-visible ring. Verified in the built bundle: featured renders the in-progress item, hover scales a 192px card to 197.8px with the glyph visible, and the item page tints from its artwork. |
||
|---|---|---|
| .. | ||
| src | ||
| .gitignore | ||
| embed.go | ||
| index.html | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| svelte.config.js | ||
| tsconfig.json | ||
| vite.config.ts | ||
Vellum web
Svelte 5 + Vite + TypeScript single-page app. It is built to a static bundle in
dist/ and embedded into the Go binary, so all asset paths are relative
(base: './' in vite.config.ts).
Commands
pnpm install
pnpm dev # dev server on :5173, proxying /api to :7788
pnpm build # writes dist/
pnpm check # svelte-check
Run the Go server on :7788 (make run from the repo root) and pnpm dev
proxies API and health requests to it, so cookies and sessions behave exactly
as they will in production.
Layout
src/
main.ts entry point
App.svelte login gate -> shell
app.css design tokens and base styles
lib/
api.ts typed client; mirrors the Go handlers
session.ts auth + library stores
nav.ts view state
components/
Login.svelte
Shell.svelte nav + view switch
Libraries.svelte library list, create, scan, delete
LibraryView.svelte item grid with covers
Reader.svelte epub.js reader with progress sync
Users.svelte admin user management
The reader resumes from a spine index, which is why progress positions are
integers: it round-trips through the polymorphic progress table without
needing a text column.