firegiant.comfiregiant.com

FireGiant, the Windows App Installer legends and WiX maintainers needed to consolidate their website with a docs platform and bring another brand under their umbrella.

Their existing site, built with a custom ASP + database content management system, was becoming brittle and inflexible.

They’d heard of Astro and Starlight and were looking for an agency expert in both technologies to build them a new website.

We were delighted to help.

Our process is nearly always the same;

1. Discovery meeting to identify requirements, content, tech stack and functionality
2. User experience / information architecture planning / wireframes and prototypes in Figma
3. Client review and feedback using Figma comments
4. High-fidelity mockups in Figma
5. Client review and feedback using Figma comments
6. Development, testing, and launch

The Figma in-situ comments are fantastic for async reviews, they empower the client to critique, question, and suggest ideas in their own time and in the relevant place, like 👉 make this logo bigger.

With the code in a shared GitHub repo, they can see continuously deployed previews and the ability to add comments and raise issues as the development progresses – no hidden surprises, and a constant log of activity.

Plus the client can clone and build the site on their local machine, allowing them to get a real feel for the site’s code, including contributing code* and ideas.

The wonderful thing about having developers for a client is that they are experts with text files.

This allowed us to ditch the database and switch to a static file based site, using markdown, yaml or json for the content.

For example, the hero.yaml for the homepage hero component is simply

hero:
  title: Successful installations aren't typically remembered.
  subtitle: But unsuccessful ones are hard to forget.
  actions:
    - title: Ensure your installation's success with FireGiant
      link: /developer-direct/ensure-success/

We built them a library of layouts and components – static Astro JSX components or interactive Vue.js islands, allowing them to simply create pages and sections themselves – an FAQ accordion block here, a YouTube component there, a set of pricing cards er, elsewhere – with the content coming from easy to create, maintain, and diff ^{and blame} snippets of text.

Starlight is a documentation system built by and with Astro.js, meaning that we could easily add on a file-system-powered fast-as-hell docs section to the site.

Much like the Astro blog system, you drop markdown files with some basic frontmatter in sub directories to get a fantastic docs site with syntax highlighting, routing, SEO, meta, search, and all the common components like file trees, cards, asides etc all beautifully styled out of the box.

So we designed & coded a custom Astro Starlight FireGiant docs theme with brand fonts, colours and icons, popped it in the repo and let them have at it.

It’s as simple as adding .md files into named directories:

└── docs
    ├── fg-wix-v3
    │   └── index.md
    ├── heatwave
    │   ├── 01-creating-new-wi-x-v4-projects.md
    │   ├── 02-converting-wi-x-v3-projects.md
    │   ├── 03-adding-wi-x-extensions.md.md
    │   ├── 04-adding-project-references.md
    │   ├── 05-building-wix-projects.md
    │   ├── 06-reporting-bugs.md
    │   └── index.md
    └── index.mdx

A high-performance high-quality easily-maintainable Astro site!

The fine folk at FireGiant.com were thrilled with the result.

• It looks fresh and modern
• It’s blazing fast with a perfect 100/100 Google PageSpeed performance rank thanks to Astro’s low-javascript approach
• The client can create, update and delete pages, and sections
• Every single piece of UI text is in simple text files
• The Starlight docs have world-class performance and features, and are super simple to maintain

Overall, a great project leading to a great experience for a great client.