Migrate Jekyll website from Less to Sass

[robmorgan]

This PR changes our website technology stack to use Sass instead of LESS. (Note: Scroll to the bottom for the technical details). In a nutshell, it turns this:

Into this:

Why you might ask?

• More of us will slowly update to newer Macbooks and adopt Apple Silicon.
• Some of the current Jekyll dependencies don't compile or work on Apple Silicon such as libv8 or the rubyracer and it would be a non-trivial task to update the underlying libraries.
• The Bootstrap library we use officially moved to Sass in version 4, although our website is still based on 3.7.
• less.rb hasn't had much love for ~7 years: https://github.com/cowboyd/less.rb
• The Terragrunt and Terratest marketing websites use Sass.
• It is my assumption if the Platform team ever uses a CSS preprocessor in Aperture it will likely be Sass.
• Our web Docker image now builds in 3m30s on an M1 Macbook Air.

What's the catch?

Technically we are updating one deprecated library - less.rb for another: jekyll/jekyll-sass-converter#116, although they'll likely upgrade to the Dart version of Sass in the future.

Technical Details

This PR implements the following major changes:

• I've used the less2scss NPM package to convert our stylesheets to Sass.
• Under the hood, we’re now using sassc.
• It bumps Jekyll to 4.2 and the Ruby Docker image to 2.7.4-buster.

Known Issues

• IaC Library: Wrong colors on search text box

QA

(Whoever / @josh-padnick) Mark these off once you've done a 1:1 visual diff against gruntwork.io.

• Homepage
• IaC Library
• Pricing Page
• Checkout
• Why Prod is Down

[netlify]

✔️ Deploy Preview for keen-clarke-470db9 ready!

🔨 Explore the source changes: 7c78c09

🔍 Inspect the deploy log: https://app.netlify.com/sites/keen-clarke-470db9/deploys/611202d9e1748e0009a11db9

😎 Browse the preview: https://deploy-preview-565--keen-clarke-470db9.netlify.app

[josh-padnick]

Thanks for submitting this, Rob! Our public website tech is outdated, and my thought has been that at some point we'll create a new website altogether, maybe in the next few months. In the meantime, these updates are a big productivity boost.

It is my assumption if the Platform team ever uses a CSS preprocessor in Aperture it will likely be Sass.

We use Tailwind for all our CSS, and it pretty much removes the need for any CSS pre-processing, so my understanding is that we don't use either Sass or Less right now and will probably rely on a small number of PostCSS plugins.

QA

Thanks for proposing a QA checklist. One curious difference I noticed in the IaC Library was this:

Yes, as you pointed out the search bar color is off, but also there's now a repo count? It's a nice change, but I'm curious why it doesn't show up in prod?

I also found this bug, where the open arrow is pointed in the wrong direction, but it looks like that exists in prod, too, so we should probably file a separate GitHub issue for that.

I found a bug where the magnifying glass icon didn't render on the search bar for the guides:

On that same page, the newsletter sign up at the bottom wasn't centered:

The guides themselves look pretty good.

Once the above items are fixed, I think this is ready to ship.

[robmorgan]

Hi @josh-padnick,

Thanks for the review! Most importantly I figure you are still using x86. Did you try to build the Docker image? Did that work? The Netlify builds look okay, so I'm assuming it works properly.

Thanks for submitting this, Rob! Our public website tech is outdated, and my thought has been that at some point we'll create a new website altogether, maybe in the next few months. In the meantime, these updates are a big productivity boost.

That is exactly my understanding. I looked at the hot new JS tech you guys are using and realized there probably needs to be an interim step - remain in Jekyll, Bootstrap 3.7 etc.

It is my assumption if the Platform team ever uses a CSS preprocessor in Aperture it will likely be Sass.

We use Tailwind for all our CSS, and it pretty much removes the need for any CSS pre-processing, so my understanding is that we don't use either Sass or Less right now and will probably rely on a small number of PostCSS plugins.

Yeah, I had a look at that and figured you'd avoided CSS preprocessors altogether. I thought it was interesting Tailwind only uses PostCSS. Then again I'm not really up to date on the latest frontend tech, so maybe its a new trend.

Yes, as you pointed out the search bar color is off, but also there's now a repo count? It's a nice change, but I'm curious why it doesn't show up in prod?

It seems I've found a repo count on production as well, so I've left it for now. I figured it's not worth the effort to start digging into JS changes on this branch.

I also found this bug, where the open arrow is pointed in the wrong direction, but it looks like that exists in prod, too, so we should probably file a separate GitHub issue for that.

That seemed to be an easy fix, so I went ahead and did that one. Let me know if you run into any other issues as I've commented out a selector property.

I found a bug where the magnifying glass icon didn't render on the search bar for the guides:

I've fixed the font path for the bootstrap fonts. It seems to render correctly now.

On that same page, the newsletter sign up at the bottom wasn't centered:

I've also figured out what was causing that. It seemed to be related to a display: flex property and the order of stylesheets. I've gone ahead and fixed that one.

One other visual issue, I've found is related to the 'filter' button on the guides page. In the interest of time, I've also avoided digging into that. It seems to also be happening on prod.

[brikis98]

I did a quick scan of the preview website and everything LGTM!

Fixed in above comment. Please re-review.

[robmorgan]

@brikis98 oh wicked! This PR will significantly help my Dev environment and hopefully others.