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:

$vibrant: #06e3b9;
$vibrant-light: #8bfac5;
$vibrant-dark: #046e46;
$muted: #41605b;
$muted-light: #5f8e86;
$muted-dark: #020505;

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.