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:
x5 pic.twitter.com/1e7d0rfaVY— Cloudy Conway (@CloudyConway) May 7, 2020
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: ￭#e15504; $vibrant-light: ￭#e15504; $vibrant-dark: ￭#993a04; $muted: ￭#34315e; $muted-light: ￭#504b91; $muted-dark: ￭#080405;
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.