diff --git a/etc/config/sponsors.yaml b/etc/config/sponsors.yaml index bab363f4671..b78b03a7a34 100644 --- a/etc/config/sponsors.yaml +++ b/etc/config/sponsors.yaml @@ -42,6 +42,7 @@ levels: topIconShowEvery: 3 displayType: SideBySide statsId: thinkcell + bgColour: rgb(110, 166, 0) - name: Patreon Legends description: 'These amazing people have pledged at the highest level of support. Huge thanks to these fine folks:' class: legendary diff --git a/lib/sponsors.interfaces.ts b/lib/sponsors.interfaces.ts index 2de75787578..d321a548cc5 100644 --- a/lib/sponsors.interfaces.ts +++ b/lib/sponsors.interfaces.ts @@ -35,6 +35,7 @@ export type Sponsor = { topIconShowEvery: number; displayType: DisplayType; statsId?: string; + style: Record; }; export type Level = { diff --git a/lib/sponsors.ts b/lib/sponsors.ts index f3e94ef834c..2cb57664992 100644 --- a/lib/sponsors.ts +++ b/lib/sponsors.ts @@ -29,6 +29,10 @@ import type {Level, Sponsor, Sponsors} from './sponsors.interfaces.js'; export function parse(mapOrString: Record | string): Sponsor { if (typeof mapOrString == 'string') mapOrString = {name: mapOrString}; const displayType = mapOrString.displayType || 'Above'; + const style = {}; + if (mapOrString.bgColour) { + style['background-color'] = mapOrString.bgColour; + } return { name: mapOrString.name, description: typeof mapOrString.description === 'string' ? [mapOrString.description] : mapOrString.description, @@ -41,6 +45,7 @@ export function parse(mapOrString: Record | string): Sponsor { displayType: displayType, priority: mapOrString.priority || 0, statsId: mapOrString.statsId, + style: style, }; } diff --git a/test/sponsors-test.ts b/test/sponsors-test.ts index 684ad8446da..bdb214f8e9f 100644 --- a/test/sponsors-test.ts +++ b/test/sponsors-test.ts @@ -48,6 +48,7 @@ describe('Sponsors', () => { obj.topIconShowEvery.should.eq(0); obj.displayType.should.eq('Above'); should.equal(obj.statsId, undefined); + obj.style.should.deep.equal({}); }); it('should make descriptions always one-sized arrays', () => { unwrap(parse({name: 'moo', description: 'desc'}).description).should.deep.eq(['desc']); @@ -67,8 +68,8 @@ describe('Sponsors', () => { it('should pick dark icons if specified', () => { unwrap(parse({name: 'bob', icon: 'icon', icon_dark: 'icon_dark'}).icon_dark).should.eq('icon_dark'); }); - it('should handle topIcons', () => { - parse({name: 'bob', topIconShowEvery: 2}).topIconShowEvery.should.eq(2); + it('should handle styles', () => { + parse({name: 'bob', bgColour: 'red'}).style.should.deep.eq({'background-color': 'red'}); }); it('should handle clicks', () => { parse({ diff --git a/views/bits/sponsors-content.pug b/views/bits/sponsors-content.pug index 60f49013239..5993c8a2a0b 100644 --- a/views/bits/sponsors-content.pug +++ b/views/bits/sponsors-content.pug @@ -25,7 +25,7 @@ block content .ces-top each sponsor in level.sponsors .ces - button.btn-block.btn-secondary(title=sponsor.title onclick=sponsor.onclick disabled=!sponsor.url) + button.btn-block.btn-secondary(title=sponsor.title onclick=sponsor.onclick disabled=!sponsor.url style=sponsor.style) if sponsor.displayType === 'SideBySide' .d-flex .ces-item-title