Kompass: Astro + DirectusKompass:Astro+Directus

A rare but not unprecedented situation – Kompass BMS approached us with fully completed designs and content for all the pages.

Slightly rarer and more unprecedented, the CEO was incredibly up to date with the latest and greatest in web development technologies and frameworks.

They were specifically looking for an agency to build the site using

• Astro for the front-end
• Tailwind for the CSS
• Directus for the Content Management System

All technologies we love working with!

The first half of the project was to export and optimise all the assets from the supplied Adobe XD (!) files, converting them into pixel-perfect HTML using Astro JSX components, using Tailwind for the CSS.

We generally write vanilla CSS for most projects, but we are happy little Tailwind bunnies when we need to be.

Island Architecture is one of the key USPs of Astro.

While the overarching philosophy is to ship zero Javascript, you will probably require it for interactivity – carousels, tabs, maps and so on.

The idea behind Astro Islands is that you can mark components – like the Carousels – as islands which will then become tiny wads of Javascript in a sea of lightweight HTML, leaving the page fast and lightweight while it loads the Javascript only when it’s needed.

A list of custom Astro JSX components we built so we could re-use them in locations throughout the site:

├── AboutModal.astro
├── AccordionItem.astro
├── BaseHead.astro
├── CalendlyWidget.astro
├── CardCTA.astro
├── CardPost.astro
├── CardPricing.astro
├── Carousel.astro
├── CarouselCaseStudies.astro
├── CarouselHome.astro
├── CarouselTestimonials.astro
├── DemoModal.astro
├── DemoModalButton.astro
├── FooterColofon.astro
├── FormattedDate.astro
├── GeoLocation.astro
├── HeroInternal.astro
├── LogoGrid.astro
├── MainFooter.astro
├── MainHeader.astro
├── NewsletterSignup.astro
├── Prose.astro
├── Schema.astro
└── SocialButtons.astro

Another but more recent Astro feature are Server Islands – these allow you to do stuff on the server and render it back out to the client.

Building this site we came across an excellent use-case for these – the client wanted to show prices in the local currency depending whether the user was in the US, UK or EU.

With Astro Server Islands, we could intercept the user’s request headers and grab their country code, and render out the pricing cards defaulted to that region. Lightweight and easy.

const countryCode = Astro.request.headers.get("cf-ipcountry")

const euCodes = ["AT", "BE", "BG", "HR", "CY", "CZ", "DK", "EE", "FI", "FR", "DE", "GR", "HU", "IE", "IT", "LV", "LT", "LU", "MT", "NL", "PL", "PT", "RO", "SK", "SI", "ES", "SE"];

// Default USD
let geolocatedSymbol = "$";
let geolocatedPrice = 19.99;

// If GB
if (countryCode === "GB") {
  geolocatedSymbol = "£";
  geolocatedPrice = 29.99;
}
// If in EU
else if (euCodes.includes(countryCode)) {
  geolocatedSymbol = "€";
  geolocatedPrice = 39.99;
}

We found this exercise so useful we wrote a blog post about it!

Astro server islands and Cloudflare geo headers for dynamic region-based content

The second big piece of this project was getting content into it. Kompass has a great but non-technical PR team – not the kind of people whose valuable time is best spent learning markdown and git.

This called for a user-friendly CMS. After evaluating the likes of Sanity and Headless WordPress – we settled on Directus;

• Open source
• Self-hostable
• Flexible
• Solid media hosting and handling
• Works well with Astro (has adapters)
• User-friendly interface

We spun up a $10/mo droplet on DigitalOcean and followed the straight-forward instructions, and soon had our content coming from the server via the official Directus SDK.

It did take a while to configure all the content types and fields, but once we got into our stride it didn’t take long until every single piece of UI text and content was editable in Directus.

The news, case studies and product content collections were a cinch to set up with frontmatter like tags, authors, categories and metadata.

A few things were a little byzantine to configure, the repeaters and relationships particularly, but 10 / 10 would use again.

We bunged the whole front-end on Cloudflare.

It has cost the client $0 so far in bandwidth or hosting fees, meaning the ongoing costs are the $10/mo droplet and the domain name. An utter pittance, compared to, say, similar cloud-based headless CMS’s per-seat pricing.

The ease with which we set up continuous deployment from GitLab PR’s and Directus deploy hooks to get the thing rebuilt and deployed was also a huge win.

We enjoyed the experience of working with supplied designs, interesting to focus on code and shoot questions like, what should this link colour be when visited and what should this gap be on tablet sized screens and so on.

Their PR team were quick to pick up the Directus CMS and were smart, engaged, and helpful in learning, critiquing, and bug-hunting.

We loved working with Kompass, and we loved the stack they requested.

If they are this tasteful in unfamiliar technologies like UI frameworks, their actual product must be incredible.