About this Site
This site is a really interesting project. It’s a static site, but it is often updated
due to danger plugins plugins in the form of gems and npm modules. Any repo associated with Danger can trigger
a fresh re-build of the site by releasing a new version. This keeps the site always up-to-date and also makes it easy to host/maintain.
The Danger JS website however takes the idea a bit further, and the entire colour scheme to be generated at runtime. This page covers a little bit of the details around how that works.
The Colour Scheme
This site gets built on the GitLab CI runner, controlled mainly by a single Rakefile in the root. This Rakefile bootstraps the site, and then pulls down the most recent tweet from @CloudyConway at the time of the build.
For this build, it was:
Next the logo is created by taking the image and applying a mask with jimp.
The site then generates a colour palette from the image. The colour palette uses node-vibrant to pick out 2 main colours, and 4 derivatives from the images. These 6 colours are then used thoughout the site.
To simplify the site assets, these colours are turned into an scss file, which looks like this:
These colours then imported into any other scss file as variables and ensure that everything is consistent. The same thing is done with SVG files, I set a custom key colour inside Sketch which I know will be replaced by a theme-fitting colour.
This theme generation means that the Danger site should be a different colour scheme every time you visit. It does mean the theme might not turn out great every time, at the trade-off of sometimes it’s a real pleasant surprise.