Sponsors display update

[codeofmochi]

Have different sponsor tiers, displayed differently on the homepage

——————————— Platinum ———————————
Logo Google        Logo Swissquote        Logo Ubisoft
———————————— Gold ———————————--
Logo Together        Logo One Plus        Logo Audio technica
———————————— Silver ———————————--
                        Logo Huawei
———————————— Bronze ———————————--
                              Logo Salt

however this should not interfere with the existing carousel display of the sponsors (such as https://clic.epfl.ch/about)

Proposed implementation

Sponsors component (https://github.com/clicepfl/clic-website/blob/master/src/components/sponsors/sponsors-list.json) has JSON definition modified as follows: it is an object, which keys are tiers containing arrays of sponsors

{
  "platinum": [
    {
      "name": "Foo Sponsor",
      ...
    },
    ...
   ],
  "gold": [
    ... 
  ],
  ...
}

Back-end implementations of https://github.com/clicepfl/clic-website/blob/master/src/components/sponsors/sponsors.ts are modified accordingly

View display implementation at https://github.com/clicepfl/clic-website/blob/master/src/components/sponsors/sponsors-view.njk are separated into 2 displays: one that separates each tier visually (with a stylized header such as https://codepen.io/mandymichael/pen/xpLNeV) and one that simply fetches all images (as currently on about/)

Modify docs accordingly

[codeofmochi]

Coherent color scheme for sponsors

The home page and the /about page have different background colors behind the sponsor logos. Since some sponsors would like to keep either a light or dark version of their logo on the website, we should change them such that they will fit on either page.

Proposal: darken the grey color on /about such that white logos are still legible. However, we should still find a solution if a logo is also grey.

[codeofmochi]

New implementation idea

sponsor-list.json has same shape, but items have additional "tier" property (define domain values):

[
    {
        "name": "Swissquote",
        "websiteURL": "https://en.swissquote.com/company/jobs",
        "imageURL": "/sponsors/swissquote.png",
        "imageStyles": null,
        "tier": "platinum",
        "expiration": {
            "year": 2021,
            "month": 12,
            "day": 15
        }
    },
    ...
]

Need to modify sponsors.ts: Sponsor class, is validator, SponsorComponent need listFromTier which filters on the "tier" property.

Need to add in sponsors-view.njk: add a macro that is able to display sponsors in a hierachy (topmost is platinum, etc). May need to modify styles: either use "imageStyles" property per sponsor (however need to specify for each sponsor", or use the SASS styles and define CSS classes for each tier).

Update the call in src/pages/home/home-page-view.njk to call the above macro

[s314cy]

Do we want different image scales per tier? For instance, platinum sponsors would have their logos displayed bigger than gold sponsors.

[codeofmochi]

Merged in #132. We should probably also optimize the implementation in the future. @s314cy should we close for now?