MITH Static "Next" — v0.4.0 🚀

v0.4.0

This pull request demonstrates a big overhaul to how the static website for MITH gets built—switching from Gatsby to Astro. This PR showcases a version of the MITH site built with Astro that is comparable to the current public release (as of late October 2021) and the PR can remain open for as long as we need to align around the new approach.

Background and motivation

The MITH team has invested a fair bit of effort into learning and using Gatsby. However, after working extensively on two Gatsby-powered sites recently (this site, and Airwaves), I encountered a couple of repeated pain points:

For a static site, Gatsby requires delivering a lot of Javascript to the browser and the ways in which the Javascript we authored gets bundled and loaded remain opaque to me
GraphQL is the heart of Gatsby's approach but for the kinds of sites we build, GraphQL adds a lot of complexity for relatively little pay off.

Astro is a new (pre-1.0 release) static site generator and "meta-framework" for building sites with Javascript. Astro's core ideas of

compiling as much as possible to HTML and CSS and making all client-side Javascript explicitly opt-in, and
allowing (m)any modern Javascript frameworks to be used as desired, including mixing and matching

meant that (despite its newness), Astro potentially addressed the pain points above very well.

As an experiment, I decided to see what it would be like to re-implement a very simple site like mith-static using Astro.

Positive aspects

This PR exists because I found that it was possible to be extremely productive in Astro. Some things I have particularly liked:

Single file component means that it's easy to keep track of data loading, styles, and HTML templating vs. when these are spread across multiple files
Having <style> elements right in components also makes component scoped CSS the default. Being unused to having so much scoped CSS this produced a few "gotchas" but overall was a net benefit.
Astro provides a default <Markdown> component that makes it easier to drop into authoring content in Markdown
Dynamic routing generally follows conventions used by Next.js and makes paginating large collections relatively easy

Things to keep an 👀 on

There isn't currently a widely-accepted solution for responsive images so we'd be doing without them again (for a little while—see next point)
This is pre-1.0 software and a fairly large change to the Astro compiler is imminent. We definitely should keep this PR open until that lands and we've addressed any updates.
Potentially also to be addressed in astro-next, this version is currently hacking around a bug in that nice default Markdown component related to handling some of the rough, ugly Markdown like we have in the MITH site
Developer conveniences like VSCode tools and a plugin for prettier that handles .astro files are works in progress (the former basically working, the latter more buggy still).

"Breaking" changes vs. v0.3.x series

The biggest breaking change that will come with this PR, is that front matter has been moved back into Markdown files for blog posts; The "Posts" table in Airtable will need to be updated to read from and synchronize with files on disk as the source of truth.
To accommodate paginated index pages for research, this would introduce a change in URLs for project pages from /research/$slug to /research/projects/$slug and /research/projects/ will need a redirect to /research/

I think this change should give us a relatively clean foundation for future content and feature updates to the MITH site and enable us to maintain high productivity for addressing significant items on the MITH website wish list.

Name	Link
Latest commit	1be279e5700d7df144fc66d45cd4c584426b3b5c
Latest deploy log	https://app.netlify.com/sites/mith-static/deploys/62d86bccd0144900082d70f4
Deploy Preview	https://deploy-preview-13--mith-static.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

umd-mith / mith-static