diff --git a/.changeset/varied-bookmark-colors.md b/.changeset/varied-bookmark-colors.md new file mode 100644 index 0000000..24dff2e --- /dev/null +++ b/.changeset/varied-bookmark-colors.md @@ -0,0 +1,5 @@ +--- +'@directory/web': patch +--- + +Vary generated bookmark logo backgrounds by link rather than group, keeping colors stable when titles or groups change. diff --git a/apps/web/src/lib/server/images/render-bookmark-logos.test.ts b/apps/web/src/lib/server/images/render-bookmark-logos.test.ts index d1874f6..192594b 100644 --- a/apps/web/src/lib/server/images/render-bookmark-logos.test.ts +++ b/apps/web/src/lib/server/images/render-bookmark-logos.test.ts @@ -116,7 +116,7 @@ describe('prepared bookmark logos with the current Initials renderer', () => { ).toBe('BF'); }); - it('keys separate slugs independently while sharing a named group color', () => { + it('uses per-link colors even within the same named group', () => { const logos = renderBookmarkLogos( configuration({ photos: { title: 'Photos', group: 'Family' }, @@ -126,7 +126,7 @@ describe('prepared bookmark logos with the current Initials renderer', () => { expect(Object.keys(logos)).toEqual(['photos', 'backup']); expect(letters(logos.photos!)).toBe('PH'); expect(letters(logos.backup!)).toBe('BF'); - expect(background(logos.photos!)).toBe(background(logos.backup!)); + expect(background(logos.photos!)).not.toBe(background(logos.backup!)); }); it('keeps colors stable through group insertion, declaration reordering and accent changes', () => { @@ -148,6 +148,19 @@ describe('prepared bookmark logos with the current Initials renderer', () => { for (const id of Object.keys(original)) expect(updated[id]).toBe(original[id]); }); + it('keeps a link color stable through title edits, regrouping and ungrouping', () => { + const original = renderBookmarkLogos( + configuration({ photos: { title: 'Photos', group: 'Family' } }) + ).photos!; + for (const group of ['Another group', undefined]) { + const updated = renderBookmarkLogos( + configuration({ photos: { title: 'Picture library', ...(group ? { group } : {}) } }) + ).photos!; + expect(background(updated)).toBe(background(original)); + expect(letters(updated)).toBe('PL'); + } + }); + it('uses a varied flat palette with opaque high-contrast colors and intrinsic 64px dimensions', () => { const config = configuration( Object.fromEntries( diff --git a/apps/web/src/lib/server/images/render-bookmark-logos.ts b/apps/web/src/lib/server/images/render-bookmark-logos.ts index 9dd03a9..e76ab2e 100644 --- a/apps/web/src/lib/server/images/render-bookmark-logos.ts +++ b/apps/web/src/lib/server/images/render-bookmark-logos.ts @@ -9,8 +9,7 @@ const backgrounds = ['#dbeafe', '#dcfce7', '#fef3c7', '#fce7f3', '#ede9fe', '#cf export function renderBookmarkLogos(config: DirectoryConfiguration): Record { return Object.fromEntries( Object.entries(config.links).map(([id, link]) => { - const identity = link.group === undefined ? `link:${id}` : `named:${link.group}`; - const colorIndex = createHash('sha256').update(identity).digest().readUInt32BE(0); + const colorIndex = createHash('sha256').update(`link:${id}`).digest().readUInt32BE(0); const background = backgrounds[colorIndex % backgrounds.length]!; const svg = new Avatar(style, { seed: initialsSeed(link.title, id), @@ -27,7 +26,6 @@ export function renderBookmarkLogos(config: DirectoryConfiguration): Record - - - - diff --git a/demo/public/demo/files.svg b/demo/public/demo/files.svg deleted file mode 100644 index 5778f34..0000000 --- a/demo/public/demo/files.svg +++ /dev/null @@ -1,6 +0,0 @@ - - Files - - - - diff --git a/demo/public/demo/home.svg b/demo/public/demo/home.svg deleted file mode 100644 index 0bf5725..0000000 --- a/demo/public/demo/home.svg +++ /dev/null @@ -1,6 +0,0 @@ - - Home automation - - - - diff --git a/demo/public/demo/music.svg b/demo/public/demo/music.svg deleted file mode 100644 index 21568c9..0000000 --- a/demo/public/demo/music.svg +++ /dev/null @@ -1,7 +0,0 @@ - - Music - - - - - diff --git a/demo/public/demo/photos.svg b/demo/public/demo/photos.svg deleted file mode 100644 index d15d69f..0000000 --- a/demo/public/demo/photos.svg +++ /dev/null @@ -1,7 +0,0 @@ - - Photos - - - - - diff --git a/docs/images/directory.png b/docs/images/directory.png index 40016e6..f76e1bc 100644 Binary files a/docs/images/directory.png and b/docs/images/directory.png differ