05rgfly6g: Add HexAvatar and use it for every existing avatar

tests/hex-avatar.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { HexAvatar, HEX_SIZES, HEX_TONES, toneFor } from "@/components/HexAvatar";
+
+const render = (props: Parameters<typeof HexAvatar>[0]) => renderToStaticMarkup(createElement(HexAvatar, props));
+
+describe("HexAvatar", () => {
+  it("renders the photo when there is one", () => {
+    const html = render({ name: "Ada Lovelace", pictureUrl: "https://img/a.jpg", size: "lg" });
+    expect(html).toContain("<img");
+    expect(html).toContain('src="https://img/a.jpg"');
+    expect(html).toContain('width="46"');
+    expect(html).toContain('height="53"');
+    expect(html).not.toContain("AL");
+  });
+
+  it("renders initials on a tone gradient without a photo", () => {
+    const html = render({ name: "Ada Lovelace", pictureUrl: null, size: "md" });
+    expect(html).not.toContain("<img");
+    expect(html).toContain(">AL<");
+    expect(html).toContain("hex-avatar-initials");
+    expect(html).toContain(`hex-avatar-${toneFor("Ada Lovelace")}`);
+    expect(html).toContain('aria-hidden="true"');
+  });
+
+  it("falls back to initials for an empty picture url", () => {
+    expect(render({ name: "Bo", pictureUrl: "" })).toContain(">B<");
+  });
+
+  it("has the three spec sizes at a 0.866 ratio", () => {
+    expect(HEX_SIZES).toEqual({
+      lg: { width: 46, height: 53 },
+      md: { width: 38, height: 44 },
+      sm: { width: 30, height: 35 },
+    });
+    for (const { width, height } of Object.values(HEX_SIZES)) {
+      expect(width / height).toBeCloseTo(0.866, 1);
+    }
+  });
+
+  it("picks the same tone for the same name, from the six tones", () => {
+    expect(toneFor("Ada Lovelace")).toBe(toneFor("  ada lovelace "));
+    for (const n of ["A", "Bo", "Carl Sagan", "Dee"]) expect(HEX_TONES).toContain(toneFor(n));
+  });
+});