Case Study
Art Killing Apathy is a collection of creative mediums and calls to action that center around justice and liberation.
From WordPress to Sanity
When I was asked to optimize a cluttered, sluggish WordPress site - after mostly working on greenfield JS projects - I almost instinctively screamed "absolutely not" and passed. Not really sure why - probably had something to do with the countless hours spent scouring Reddit and forums learning of the horrors of poorly written PHP back in yesteryear. But this project was a bit different. A noble challenge packed with a load of precious content begging to be loosed from it's barely structured, user-battered home..this site needed love after years of forgone updates. But how best do we juice a shared WordPress?
Figured I would start with the headless approach. I hit their REST API and immediately was face-to-face with a wall of barely relevant JSON. Maybe, graphql? The WP plugin was fairly intuitive, easy to install, and boom! ..there's the data. I spun up a quick Svelte view, booted up Apollo, contorted my API calls and waited to feast my eyes on that beautiful content. And then, I kept on waiting..for...what....seemed like forever. How many seconds did it just take for me to grab the titles? But I definitely want to snag some descriptions too, and heaven-forbid images. Was figuring out how to optimize a WordPress backend really worth the time sink? Not for me. I chose Sanity .
A headless CMS, built on custom structured content, data available via lightning fast client calls, a flexible query language (GROQ), and some of the best documentation around. Time to migrate. I followed the guide and spaghetti coded my way to pulling in parts, but there were so many interconnected data types that I was parched for some help. I scoured the Sanity Slack until I found a few projects ( this was particularly useful) to fork and reconfigure until I had my bobo migration tool. It wasn't much but it was honest work...putting the pieces together and attributing code that would literally never see the light of day. I successfully implemented a hybrid approach, using promises to get and set the featured images and exporting the rest to ndjson, and the sight of nearly 200 posts magically appearing in my Sanity Studio after meticulously defining content types for hours (years???) made me cry and jump and fist bump the air - sometimes I'm painfully aware of the trauma of growing up in Jersey and beaching at THE Jersey Shore. I felt all of the feelings because I knew that the unknown, unsolved problems of WordPress were behind me. Now I had only to forget the dreaded Aveda WP theme that cluttered up this blog's pages, and think about how to actually display this data in some type of meaningful way.
Sapper Helped Make it Svelte
Even though SvelteKit was new, shiny, and in beta heat, after I hit my first error 5 minutes in I figured I would hold out having my mind blown. After the trauma of WordPress I needed some steadiness in my workflow - I went with Sapper , Svelte's answer to Nextjs - I don't know how a modern dev could possibly forsake baked-in file-based routing..do you hate yourself? Yes yes, different strokes for different use cases, and a blog was an ideal match for this tech. I made the landing, which included some featured posts (editor controlled in Sanity studio), a posts page that led to slugified versions of each post, a dual about section (part for the site info, and part for the sole journalist behind it), and a contact page of social media links. Dropped in some scoped styles, a global hand-coded design system for easy-themes, and sent it off to the client.
Good reactions to the flow, the layout, but not the "posts." The main issue that she had was that it felt disingenuous to call them "posts" when they included articles, podcast write-ups, photojournalism, music, and store items. How about the "Sum of me" she joked? I said how about "content?" Hers was nondescript while mine was overly ambiguous - seriously the definition of the word "content" is beyond dull, despite its overarching ubiquity. We landed on "art" because well, frankly, it should have been obvious.
Art was the underlying motivation for this site and its content, so I decided to jazz up the place. The landing page features a dynamically generated wordcloud, pooled from the titles and descriptions of all of the client's posts, ranked by frequency of word. The contact page is a retrofitted particle system that pulls in the primary color's css custom property and converts the hex to rgb to color the lines between points. The dark/light mode feels like a necessity in any modern site. Further, I stuffed more transitions/animations in there than should ever be allowed - courtesy of Svelte's brilliant APIs that leverage the power of CSS animations without requiring a bloated JS library - like seriously, can I get some tree-shaking please?
My main gripe with the original design of the site is that there was so much content displayed at once that it was mentally draining to scan for longer than a few seconds. If you didn't already know where you were going, you weren't going anywhere. I built in a robust search (incredibly straightforward with Svelte's approach to data-binding) and a category system pulled from the CMS - the flexibility of GROQ made it easy to only get the data I actually needed to pull all of this off without sacrificing performance. However, an immediate issue arose: the only category pulled from WordPress was "Uncategorized"... Luckily, the client saw the value of being able to snappily partition content. She literally categorized every single one of her posts within a few hours - bless her soul. And just like that, the site was feature-complete.
Aside and Outro
It should be noted that the success of any project is entirely dependent on the willingness of all involved parties to put in the work. It's so difficult to make content compelling onscreen without compelling content, and this project ticked every single one of those boxes. While I was incredibly challenged and felt almost always out of my depth, I really wanted to do right by this art and that meant taking extra care to set up continuous integration as I will probably be maintaining this site, her art, until one of us dies.