Support colour background for think-cell (#6223)

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

lib/sponsors.interfaces.ts

@@ -35,6 +35,7 @@ export type Sponsor = {
     topIconShowEvery: number;
     displayType: DisplayType;
     statsId?: string;
+    style: Record<string, string>;
 };
 
 export type Level = {

lib/sponsors.ts

@@ -29,6 +29,10 @@ import type {Level, Sponsor, Sponsors} from './sponsors.interfaces.js';
 export function parse(mapOrString: Record<string, any> | 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, any> | string): Sponsor {
         displayType: displayType,
         priority: mapOrString.priority || 0,
         statsId: mapOrString.statsId,
+        style: style,
     };
 }
 

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({

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