Building with Remix

As is tradition for each trip, I have built a new website. This time I have used Remix, Sanity and a bunch of other cool tools created by smart people.

First up, we have Remix over Gatsby, I've used Gatsby for a few years now, but having something new to build with has been nice. Instead of being astatic site generator (which, technically Gatsby is no longer purely a SSG) Remix combines server side loaders and actions with route based components. It's nice working route first, rather than generating the routes based off queries in the gatsby-node.js file. Another benefit with Remix is a I can just publish from Sanity and then the new content appears on the site on refresh, rather than having to wait for a build on Netlify to complete. This should make updating the site from my phone while we travel much easier.

Like any JavaScript framework, Remix allows for Typescript to be used effortlessly. Typing for the content from the Sanity CMS is managed via GROQD, which uses the GROQ language from Sanity and adds Zod to it. I have had some issues with this approach, finding it a little limiting on what I can do with my queries if I'm getting a little weird and using the current country to determine the next country. I think I could avoid a lot of this by using more explicit linking for critical things like next and previous countries. My current schema is a little light and probably could benefit from a parent "trip" item. I just have country and stop, and they're linked by a stop being parented, rather than a country containing a list of stops that can contain the order.

I am going to spend a little more time writing up exactly how I built this in the future. Let me know if there's any specifics you'd like to learn about.