vole

Clone

Read only, no credentials:

https://rodent.software/git/vole.git

Write over SSH with a registered key:

git clone ssh://git@0.0.0.0:2222/vole.git

A free and open-source forge that lives in your Git repo.

Draw avatars with DiceBear instead of by hand

97f77001eed76cc287aeba532c4d670488121a18 · Keenan Nemetz · 7d ago · parent ca098f62

Draw avatars with DiceBear instead of by hand

The marks this package drew itself were a design I kept losing arguments
with. Avatars are now DiceBear's Shapes style, which is what the request
asked for.

DiceBear is JavaScript and Vole is a Go binary, so the split is: the
server renders the account's initial on its Everforest ground, and an
embedded bundle replaces it with the mark when the page runs. The
initial is what a browser without scripts keeps, so nothing depends on
the bundle arriving; the seed is the account name, so the same person
draws the same mark everywhere; and the ground is read from the element,
so vole.css remains the only palette.

The bundle is core 9.3.1 plus Shapes 9.4.2 (MIT code, CC0 design), built
with esbuild and committed like the other vendored scripts: 18KB, 5.5KB
gzipped. Its source is scripts/avatars-entry.js, and the licence files
beside it are inventoried in NOTICE, so the verify workflow's licence
check keeps passing. No request leaves the instance and no avatar is
stored.

Two details worth naming. Each mark gets a unique clip-mask id, because
SVG ids are document-wide and a directory page holds fifty of them. And
the RDF metadata block DiceBear embeds is stripped: it is identical for
every avatar and its licence is in NOTICE, so repeating it in the DOM
would be weight without information.

server/web/static/app.js +14

@@ -774,3 +774,17 @@ const copyText = (value, done) => {
	774	774	read();
	775	775	document.body.addEventListener('htmx:oobAfterSwap', read);
	776	776	})();
		777
		778	// Avatars are drawn in the browser by DiceBear (static/dicebear-avatars.min.js).
		779	// The server renders each account's initial on its ground colour, and this swaps
		780	// the mark in once the page has the script: no script, no missing avatar, just
		781	// the letter the page has always shown. HTMX swaps bring new names with them, so
		782	// a replaced fragment is drawn too. The seed is the name in the attribute; the
		783	// ground is read from the element, which keeps vole.css the only palette.
		784	(() => {
		785	const draw = (root) => {
		786	if (window.VoleAvatars) window.VoleAvatars.renderAll(root);
		787	};
		788	draw(document);
		789	document.body.addEventListener('htmx:afterSwap', (event) => draw(event.target));
		790	})();