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 for a (generally) one person dev team.

The Danger JS website however takes the idea a bit further, and the entire colour scheme to be generated at build time. 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, that tweet was:

#Palette

With the tweet, and it’s image downloaded locally. The Danger logo is created by taking the downloaded image and applying a mask with the npm module 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 styling assets, these colours are turned into an scss file, which looks like this:

$vibrant: ￭#04fc54;
$vibrant-light: ￭#fc9654;
$vibrant-dark: ￭#591c44;
$muted: ￭#5a2d29;
$muted-light: ￭#8e4841;
$muted-dark: ￭#000000;

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 to visit this site I’ve been running for many years.